Web 


前 端 开发 
系列 丛书 
HTML5+CSS3 
Web 前 端 开发 
唐 四 薪 编著 
mm 
fe, 


oo0000 
O@Ooo@ 
O00@o0 
Oo@000 
®o0000 
oo000@0 


清华 大 学 出 版 社 


Web 前 端 开发 系列 丛书 


HTML5+ CSS3 Web 前 端 开 发 


唐 四 薪 编著 


衣 
发 
由 


大 学 出 版 社 
北 京 


pal 


内 容 简 介 


本 书 全 面 介绍 了 基于 HTML5 十 CSS3 的 Web 前 端 开发 技术 ,在 叙述 有 关 原 理 时 安排 了 大 量 的 相关 
实例 。 本 书 分 为 9 章 , 内 容 包括 Web 前 端 开发 概述 ,HTML,HTML5 与 Web 标准 ,CSS 样式 美化 ,CSS 
布局 ,表格 与 表单 ,响应 式 网 页 设计 ,JavaScript 与 jQuery 基础 ,Bootstrap 响应 式 网 页 设计 等 。 附 录 中 安 
排 了 作为 课程 教学 的 实验 。 全 书面 向 工程 实际 ,强调 原理 性 与 实用 性 。 

本 书 适合 作为 高 等 院 校 各 专业 “Web 前 端 开发 ”或 “网 页 设计 ”等 课程 的 教材 ,也 可 作为 网 页 设计 与 
制作 的 培训 类 教材 ,还 可 供 网 站 设计 和 开发 人 员 参 考 使 用 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ,无 标签 者 不 得 销售 。 
版 权 所 有 ,侵权 必 究 。 侵 权 举 报 电 话 : 010-62782989 13701121933 


图 书 在 版 编目 (CIP) 数 据 


HTML5 十 CSS3 Web 前 端 开发 / 唐 四 薪 编 著 . 一 北京 : 清华 大 学 出 版 社 ,2018 
(Web 前 端 开 发 系列 丛书 ) 
ISBN 978-7-302-49192-7 


I. @H… [. @ 唐 … 焉 . @ 超 文本 标记 语言 一 程序 设计 一 教材 @ 网 页 制作 工具 一 教材 
N. OTP312.8 @TP393. 092.2 


中 国 版 本 图 书馆 CIP 数据 核 字 (2017) 第 330861 号 


责任 编辑 : 张 民 李 阶 
封面 设计 : 传 瑞 学 
责任 校对 : 李 建 庄 
责任 印 制 : 从 怀 宇 


出 版 发 行 : 清华 大 学 出 版 社 
网 址 : http://www. tup. com. cn，http://www. wqbook. com 
地  ” 址 : 北京 清华 大 学 学 研 大 厦 A 座 邮 编 : 100084 
社 总 机 : 010-62770175 邮购 : 010-62786544 
投稿 与 读者 服务 : 010-62776969，c-service@tup. tsinghua. edu. cn 
质量 反馈 : 010-62772015 ，zhiliang@tup. tsinghua. edu. cn 
课件 下 载 : http://www. tup. com. cn,010-62795954 
者 : 北京 移 海 金 澳 胶印 有 限 公司 
销 : 全 国 新 华 书店 
本 : 185mmX260mm 印 张 : 19.75 字 数 : 458 千 字 
次 : 2018 年 5 月 第 1 版 印 ”次 : 2018 年 5 月 第 1 次 印刷 
数 : 1 一 1500 
价 : 49.00 元 





产品 编号 : 076820-01 


《HTML5+CSS3 Web 前 端 开发 》 





Web 前 端 开发 是 由 很 多 互联 网 公司 一 致命 名 的 一 种 工作 职位 。 毋 庸 置疑 , Web 前 端 
开发 这 个 职位 是 由 网 页 设计 演变 而 来 ,但 随 着 近 几 年 来 ,移动 互联 网 时 代 的 到 来 , Web 前 
端 开发 已 经 有 了 更 广泛 的 内 涵 , 因 为 像 微 信 公 众 号 、 手 机 APP( 其 中 的 Web APP 和 
Hybrid APP) 和 移动 端 网 页 的 开发 都 需要 Web 前 端 开发 技术 。 

目前 ,Web 前 端 开发 对 人 才 的 需求 量 非常 大 ,前 端 开发 人 员 的 薪酬 通常 比 同 层次 的 
后 端 开发 人 员 薪 酬 水 平 还 要 高 ,这 是 因为 前 端 开发 由 于 涉及 界面 设计 和 交互 ,个 性 化 很 
强 , 导 致 项 目的 重用 性 水 平 低 , 而 后 端 很 多 项 目 都 可 以 重用 ,比如 许多 不 同 的 网 站 可 以 共 
用 一 个 后 台 ,这 就 造成 了 前 端 开 发 人 员 的 需求 量 远大 于 后 端 开 发 人 员 的 需求 量 。 

Web 前 端 开 发 技术 的 基础 是 HTML5、CSS3 和 JavaScript。 虽 然 其 主要 任务 仍然 是 
网 页 设计 ,但 已 经 产生 了 巨大 的 变化 ,比如 通过 CSS3 就 能 制作 出 炫丽 的 动画 和 交互 效 
果 ,而 过 去 却 要 依赖 于 Flash 或 JavaScript; 固定 宽度 的 网 页 布局 已 逐步 向 能 适应 各 种 屏 
幕 的 响应 式 网 页 布局 华丽 转变 ;基于 组 件 式 的 网 页 设计 思想 相对 于 从 头 开 始 的 网 页 制作 
方法 来 说 ,能 极 大 地 减少 开发 人 员 的 工作 量 。 

Web 前 端 开 发 的 教学 主要 有 两 项 任务 , 即 传授 知识 和 培养 兴趣 。 笔 者 认为 教学 成 功 
的 关键 是 在 这 两 方面 寻找 一 个 折 中 。 如 果 上 课 讲授 的 知识 点 过 多 过 细 , 则 学 生 思 考 和 实 
践 的 环节 就 会 减少 ;如 果 讲 授 的 知识 点 过 少 ,片面 强调 让 学 生 实 践 , 则 学 生 由 于 知识 点 没 
理 清 ,又 容易 陷入 低 水 平 的 盲目 实践 。 

为 此 ,本 书 在 编写 时 ,注重 培养 学 生 兴 趣 , 在 章节 安排 上 尽快 让 学 生 进 入 CSS 阶段 的 
学 习 , 将 表格 和 表单 的 内 容 安排 在 CSS 基础 知识 的 后 面 ,因为 只 有 接触 到 CSS, 学 生 才 会 
领会 到 这 门 课 程 的 乐趣 。 并 且 本 书 重点 讲授 CSS 的 内 容 , 因 为 CSS 仍然 是 Web 前 端 开 
发 这 门 课程 最 重要 的 内 容 。 其 次 ,考虑 到 初学 者 以 前 并 未 接触 过 任何 网 页 设计 语言 ,本 书 
将 传统 的 CSS 知识 和 CSS3 的 内 容 进行 统一 编排 ,从 而 使 读者 更 容易 系统 掌握 CSS 的 传 
统 技术 和 新 技术 。Bootstrap 作为 前 端 开发 的 一 种 流行 技术 ,代表 了 网 页 制作 技术 的 两 大 
发 展 趋势 : 一 是 响应 式 网 页 布局 的 趋势 ,可 以 说 ,响应 式 网 页 布局 将 是 网 页 布局 历史 上 的 
第 二 次 革命 ,第 一 次 革命 是 CSS 布局 取代 表格 布局 ;二 是 基于 组 件 的 网 页 制作 方法 ,这 种 
网 页 制作 方法 能 避免 从 头 开始 写 代码 ,避免 了 过 去 网 页 制作 过 程 中 令 人 厌倦 的 重复 劳动 ， 
极 大 地 提高 了 网 站 的 开发 效率 ,因此 Bootstrap 必 将 引起 更 多 网 站 开发 者 的 重视 。 

为 了 便于 读者 阅读 和 减少 篇 幅 , 本 书 采用 精简 代码 的 编排 方式 ,读者 一 般 都 能 够 容易 
地 将 其 还 原 成 完整 代码 ,同时 每 个 代码 都 标 有 序号 ,读者 能 够 方便 地 在 配套 源 代码 中 找到 
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完整 代码 并 能 直接 运行 。 

本 书 的 教学 大 概 需要 64 学 时 ,其 中 实验 学 时 不 少 于 16 学 时 。 如 果 学 时 量 不 足 , 则 可 
以 主要 讲授 第 2、4、5 章 的 内 容 。 带 “* ”号 的 章节 建议 学 生 自 学 。 

本 书 为 将 其 作为 教材 的 教师 提供 教学 用 多 媒体 课件 ,实例 源 文件 和 实验 大 岗 ,可 登录 
本 书 的 配套 网 站 http://wxy. hynu. cn/ec 免费 下 载 ,也 可 和 作者 联系 ( 微 信 和 号: tangsx4， 
邮箱 ; tangsix@163. com) 。 

本 书 由 唐 四 薪 编写 了 第 3 一 10 章 。 林 睦 岗 、 唐 琼 编写 了 第 1 章 和 第 2 章 的 部 分 内 容 。 
参加 编写 的 还 有 谭 晓 兰 、 喻 缘 、 刘 燕 群 、 唐 沪 湘 、 刘 旭 阳 、 陆 彩 琴 、 唐 金 娟 、 谢 海 波 、 尹 军 、 唐 
琼 , 何 青 、 唐 佐 芝 、 舒 清 健 等 ,他 们 编写 了 第 2 章 的 部 分 内 容 。 

本 书 的 写作 得 到 衡阳 师范 学 院 “ 十 三 五 ”专业 综合 改革 试点 项 目 * 计 算 机 科学 与 技术 ” 
的 支持 。 本 书 是 衡阳 市 科技 计划 项 目 (2016KJ02) 的 研究 成 果 。 

由 于 编者 水 平和 教学 经 验 有 限 , 书 中 错误 和 不 妥 之 处 在 所 难免 ,欢迎 广大 读者 和 同行 
批评 指正 。 
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2018 年 3 月 
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第 1 章 ”Web 前 端 开 发 概述 


随 着 “互联 网 十 "时代 的 到 来 ,人 们 获取 信息 已 不 再 局 限于 计算 机 端 网 页 , 微 信 公 众 
号 .手机 APP 与 移动 端 网 页 成 为 人 们 的 新 选择 。 为 了 开发 这 些 互联 网 产品 的 界面 , Web 
前 端 开发 这 一 职业 应 运 而 生 。 


1.1 Web 前 端 开 发 与 网 页 设计 


“Web 前 端 开发 "是 从 “网 页 设计 ”这 一 名 称 演变 而 来 的 。 从 Web 2.0 时 代 开 始 , 网 站 
的 功能 变 得 越 来 越 复杂 ,但 是 从 总 体 上 看 ,网 站 开发 的 任务 可 分 为 浏览 器 端 页 面 的 制作 和 
服务 器 端 程序 的 编写 。 人 们 把 浏览 器 端 俗称 为 Web 前 端 ,而 把 服务 器 端 称 为 Web 后 端 。 

因此 Web 前 端 开发 最 初 就 是 指 浏览 器 端 页 面 的 制作 ( 即 网 页 设计 ) ,包括 浏览 器 端 三 
种 代码 (HTML、CSS、JavaScript) 的 编写 。 但 近 几 年 来 ,智能 手机 的 普及 已 将 人 们 带 入 移 
动 互 联网 时 代 , Web 前 端 开发 的 范畴 已 不 局 限于 计算 机 端 网 页 的 制作 , 像 微 信 公众 号 、 手 
机 APP( 其 中 几 种 ) 移动 端 网 页 都 需要 使 用 网 页 制作 技术 开发 。 

提示 : 目前 的 手机 APP 可 分 为 三 种 , 即 Native APP( 原 生 APP)、Web APP 和 
Hybrid APP( 混 合 APP) ,除了 第 一 种 APP 的 界面 是 用 Java 等 程序 编写 的 以 外 ,后 两 种 
APP 的 界面 本 质 上 都 是 用 HTML5 等 技术 开发 的 移动 端 网 页 界面 ,并 将 移动 端 浏览 器 的 
框架 隐藏 起 来 。 


1.1.1 网 页 的 概念 和 本 质 


如 果 将 WWW 看 成 是 Internet 上 的 一 座 大 型 图 书馆 ,网 站 就 像 图 书馆 中 的 一 本 书 ， 
而 网 页 便 是 书 中 的 一 页 。 

一 个 网 页 就 是 一 个 文件 ,存放 在 世界 某 处 的 一 台 Web 服务 器 中 。 

当 用 户 在 浏览 器 地 址 栏 输入 网 址 后 ,经 过 HTTP( 超 文本 传送 协议 ) 的 传输 ,网 页 就 
会 被 传送 到 用 户 的 计算 机 中 ,然后 通过 浏览 器 解释 网 页 的 内 容 , 再 展示 到 用 户 的 眼前 。 图 
1-1 是 Chrome 浏览 器 打开 的 网 页 。 在 浏览 器 窗口 中 右 击 ,执行 “查看 网 页 源 代码 ”命令 ， 
会 打开 一 个 纯 文本 文件 ,如 图 1-2 所 示 。 这 个 文本 文件 中 的 内 容 称 为 HTML 代码 ,浏览 
器 的 本 质 其 实 是 把 HTML 代码 解释 成 用 户 所 看 到 的 网 页 的 工具 。 

HTML 是 HyperText Markup Language 的 缩写 ,直译 为 “ 超 文本 标记 语言 ”。 

网 页 是 用 HTML 编写 的 一 种 纯 文本 文件 。 用 户 通 过 浏览 器 所 看 到 的 包含 了 文字 、 
图 像 \ 链 接 、 动 画 和 声音 等 多 媒体 信息 的 每 个 网 页 ,其 实质 是 浏览 器 对 HTML 代码 进行 
了 解释 ,并 引用 相应 的 图 像 .动画 等 资源 文件 , 才 生 成 了 多 姿 多 彩 的 网 页 。 

但 是 ,一 个 网 页 并 不 是 一 个 单独 的 文件 ,网 页 中 显示 的 图 片 .动画 等 文件 都 是 单独 存 


《HTML5+CSS3 Web 前 端 开发 


中 扣 山 WIE 湖南 省 名山 学 可 x 





所 CC Ddhuanshan hynu mn 
-本 Te 习 


由 人 
。 船上 出 研究 
PV TH 





论 王 船山 “神道 设 教 "催生 遵 祀 实践.。 

4 船山 可 承 了 关于 - 神 放 讽 孝 " 亲 显 委 思想 的 基 
国力 为 -神道 设 教 "可 众生 章 礼 "，[4-28] 
* 王 站 (Ld 诗 评选, 的 根本 义 与 批评 展开 思路 4-28] 
* 肯 季 民族 精神 , 振兴 中 华 一 毛泽东 与 王 船 山 喜 振 … [4-25] 
* 王 船山 的 于 学 异 满 之 约 塘 建 平 4-28] 
* 论 王夫之 的 十 人 精神 与 风流 思想 一 陈 杨 [4-28] 
* 再 这 王 股 | 研究 原文 引用 中 的 问题 - 张 齐 政 [Crit] 


说 © |D viewsource:mm. wangchuanshan. cn 





《html lang="zh-CH"> 
head> 


《title) 船 山 研究 .湖南 省 船山 学 研究 基地 </title》 
neta charset=" gb23 
neta nane="viewport” content="width=device-width, initial-scale=1"> 
neta http-equiv="X-UA-Conpatible” content="IE=edge, Chrome=1” / 
neta http-equiv="X-UA-Conpatible” content="IE=9” /> 
thor” content="tangsix” /> 
“ 王 船山 , 王夫之 ,船山 学 ,研究 基地 "> 
船山 ,王夫之 ,船山 学 ,研究 基地 ”》 
link rel="stylesheet” href="css/bootstrap, Min.css” type="text/css > 
1 一 <link href="css/bootstrap-thene-nin. css” rel="stylesheet”/)——> 
《link rel="stylesheet” href="css/style, css”» 





图 1-2 网 页 的 源 代 码 


放 的 ,以 方便 多 个 网 页 引用 同一 张 图 片 ,这 和 Word 等 格式 的 文件 有 明显 区 别 。 
1.1.2 网 页 设计 的 两 个 基本 问题 


网 页 设计 是 艺术 与 技术 的 结合 。 从 艺术 的 角度 看 ,网 页 设计 的 本 质 是 一 种 平面 设计 ， 
就 像 出 黑板 报 、 设 计 书 的 封面 等 平面 设计 一 样 ,对 于 平面 设计 ,我 们 需要 考虑 两 个 基本 问 
题 , 那 就 是 布局 和 配色 。 


1. 布局 


对 于 一 般 的 平面 设计 来 说 ,布局 就 是 将 有 限 的 视觉 元 素 进行 有 机 的 排列 组 合 ,将 理性 
思维 个 性 化 地 表现 出 来 。 网 页 设计 和 其 他 形式 的 平面 设计 相 比 有 相似 之 处 , 它 也 要 考虑 
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网 页 的 版 式 设计 问题 ,如 采用 何 种 形式 的 版 式 布局 。 与 一 般 平 面 设计 不 同 的 是 ,在 将 网 页 
效果 图 绘制 出 来 以 后 ,还 需要 用 技术 手段 (代码 ) 实 现 效果 图 中 的 布局 ,将 网 页 效果 图 转换 
成 真实 的 网 页 。 

在 将 网 页 的 版 式 和 网 页 效果 图 设计 出 来 后 ,就 可 用 以 下 方式 实现 网 页 的 布局 。 

(1) 表格 布局 : 将 网 页 元 素 填 入 表格 内 实现 布局 ;表格 相当 于 网 页 的 骨架 ,因此 表格 
布局 的 步骤 是 先 画 表格 ,再 往 表 格 的 各 个 单元 格 中 填 内 容 , 这 些 内 容 可 以 是 文字 或 图 片 等 
一 切 网 页 元 素 。 

(2) CSS 布局 : 这 种 布局 形式 不 需要 额外 表格 作为 网 页 的 骨架 ,而 是 利用 网 页 中 每 
个 元 素 自身 具有 的 ”盒子 "来 布局 ,通过 对 元 素 的 盒子 进行 不 同 的 排列 和 嵌 套 ,使 这 些 盒子 
在 网 页 上 以 合适 的 方式 排列 就 实现 了 网 页 的 布局 。 在 网 页 布局 技术 的 发 展 过 程 中 ,产生 
了 Web 标准 的 讨论 ,Web 标准 倡导 使 用 CSS 来 布局 。 
从 技术 角度 看 ,网 页 设计 就 是 要 运用 各 种 语言 和 工具 解决 网 页 布局 和 美观 的 问题 ,所 
以 网 页 设计 中 的 很 多 技术 都 仅仅 是 为 了 使 网 页 看 起 来 更 美观 。 


2. 配色 


网 页 的 色彩 是 树立 网 页 形象 的 关键 要 素 之 一 。 对 于 一 个 网 页 设计 作品 ,浏览 者 首先 
看 到 的 不 是 图 像 和 文字 ,而 是 色彩 搭配 ,在 看 到 色彩 的 一 瞬间 ,浏览 者 对 网 页 的 整体 印象 
就 确定 下 来 了 ,因此 说 色彩 决定 印象 。 一 个 成 功 的 网 页 作品 ,其 色彩 搭配 可 能 给 人 的 感觉 
是 自然 .洒脱 的 ,看 起 来 只 是 很 随意 的 几 种 颜色 搭配 在 一 起 ,其 实 是 经 过 了 设计 师 的 深思 
熟 虑 和 巧妙 构思 的 。 

对 于 初学 者 来 说 ,在 用 色 上 切 鼠 将 所 有 的 颜色 都 用 到 ,尽量 控制 在 三 种 色彩 以 内 ,并 
且 这 些 色彩 的 搭配 应 协调 。 而 且 一 般 不 要 用 纯色 ,灰色 适合 与 任何 颜色 搭配 。 








1.1.3 ”网 页 设计 语言 一 一 HTML 简介 


网 页 是 用 HTML 编写 的 。HTML 作为 一 种 建立 网 页 文档 的 语言 , 它 用 标记 标明 文 
档 中 的 文本 及 图 像 等 各 种 元 素 ,指示 浏览 器 如 何 显示 这 些 元 素 。HTML 具有 语言 的 一 般 
特征 ,所 谓语 言 , 就 是 一 种 符号 系统 ,具有 自己 的 词汇 (符号 ) 和 语法 (规则 )。 

所 谓 标 记 , 就 是 做 记号 。 例 如 ,为 了 让 浏览 器 理解 某 段 内 容 的 含义 ,HTML 的 制定 者 
将 各 种 内 容 写 在 标记 内 ,以 标明 其 含义 。 例 如 : 


< 标记 > 受 标记 影响 的 内 容 < /标记 > 


这 就 和 我 们 写 文 章 时 用 粗 体 字 表示 文章 的 标题 ,用 换行 空 两 格 表示 一 个 段落 类 似 ， 
HTML 是 用 一 对 二 hl 二 标记 把 文字 括 起 来 表示 这 些 字 是 一 级 标题 ,用 二 p 二 标记 把 一 段 
字 括 起 来 表示 这 是 一 个 段落 。 

所 谓 超 文本 ,就 是 相 比 普通 文本 有 超越 的 地 方 , 如 超 文本 可 以 通过 超 链 接 转 到 指定 的 
某 一 页 ,而 普通 文本 只 能 一 页 页 翻 。 超 文本 还 具有 图 像 、 视 频 、 声 音 等 元 素 , 这 些 都 是 普通 
文本 所 不 具有 的 特征 。 
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HTML 是 SGML( 标 准 通用 标记 语言 ) 在 WWW 中 的 应 用 。 标 记 语 言 的 发 展 过 程 如 
图 1-3 所 示 。1999 年 HTML4. 01 发 布 ,是 HTML 最 成 熟 的 一 个 版 本 。HTML4. 01 后 
的 一 个 修订 版 本 是 XHTML1. 0, 该 版 本 并 没有 引入 新 的 标记 或 属性 ,唯一 的 区 别 只 是 语 
法 更 加 严格 ,但 XHTML 于 2009 年 被 W3C 放弃 , 转 而 发 布 了 新 的 HTML5 标准 。 目 前 
大 多 数 浏览 器 已 支持 HTML5, 但 IE10 以 下 版 本 的 浏览 器 对 HTML5 的 支持 仍 很 不 好 。 








SGML(1985) SGML: Standard Generalized Markup 


Language 
HTML: Hypertext Markup Language 


HTML(1993) XML(1998) XML: eXtensible Markup Language 


HTML5 FR XHTML(2000) | ee 


图 1-3 标记 语言 的 发 展 过 程 




















需要 注意 的 是 ,HTML 与 编程 语言 是 明显 不 同 的。 首先 ,HTML 不 是 一 种 计算 机 编 
程 语言 ,而 是 一 种 描述 文档 结构 的 语言 ,或 者 说 是 排版 语言 ;其 次 ,HTML 是 弱 语 法 语言 ， 
随便 怎么 写 都 可 以 ,浏览 器 会 尽力 去 理解 执行 ,不 理解 的 按 原样 显示 。 而 编程 语言 是 严格 
语法 的 语言 , 写 错 一 点 点 计算 机 就 不 执行 ,报告 错误 ;最 后 ,HTML 不 像 大 多 数 编程 语言 
一 样 需要 编译 成 指令 后 再 执行 ,而 是 每 次 由 浏览 器 解释 执行 。 


1.1.4 网 页 制作 软件 


网 页 的 本 质 是 纯 文本 文件 ,因此 可 以 用 任何 文本 编辑 器 制作 网 页 ,但 这 样 必须 完全 手 
工 书写 HTML 代码 。 为 了 提高 网 页 制作 的 效率 ,人 们 一 般 借助 于 专业 的 网 页 开发 软件 
制作 网 页 ,它们 具有 “所 见 即 所 得 ”(what you see is what you get) 的 特点 ,可 以 不 用 手工 
书写 代码 ,通过 图 形 化 操作 界面 就 能 插入 各 种 网 页 元 素 , 如 图 像 表 格 、 超 链接 等 ,而 且 能 
在 设计 视图 中 实时 地 看 到 网 页 的 大 致 浏览 器 效果 。 目 前 流行 的 专业 网 页 开发 工具 主 
要 有 : 

(1) Adobe 公司 的 Dreamweaver CC,Dreamweaver( 本 书简 称 DW) 的 中 文 含义 是 “ 织 
梦 者 ”,DW 具有 操作 简洁 、 容 易 上 手 等 优点 ,是 目前 最 流行 的 网 页 制作 软件 。 

由 于 Dreamweaver CS 以 上 版 本 对 中 文 的 支持 不 太 好 , 且 设置 站 点 和 预览 网 页 时 选 
项 过 多 ,建议 初学 者 使 用 经 典 版 本 Dreamweaver 8 进行 网 页 设计 学 习 。 

虽然 DW 具有 “所 见 即 所 得 ”的 网 页 制作 能 力 , 可 以 让 不 懂 HTML 的 用 户 也 能 制作 
出 网 页 。 但 如 果 想 灵活 制作 更 加 精美 专业 的 网 页 ,很 多 时 候 还 是 需要 在 代码 视图 中 手工 
修改 代码 ,因此 学 习 网 页 的 代码 对 网 页 制作 水 平 的 提高 是 很 重要 的 。 

DW 等 软件 同时 具有 很 好 的 代码 提示 和 代码 标注 功能 ,使 得 手工 编写 和 修改 代码 也 
很 容易 ,并 且 还 能 报告 代码 错误 ,所 以 就 算是 手工 编写 代码 ,也 推荐 使 用 该 软件 。 

DW 同时 具有 强大 的 站 点 管理 功能 ,因此 它 还 是 网 站 开发 工具 , 集 网 页 制作 和 网 站 管 




















Web 前 端 开 发 概述 


理 功 能 于 一 体 。 

(2) Sublime Text 3 是 一 款 流行 的 代码 编辑 器 软件 ,可 运行 在 Windows、 Linux、 
MacOS X 平 台 上 ,虽然 该 编辑 器 只 能 手工 编写 代码 ,没有 图 形 化 的 网 页 设计 操作 界面 ,但 
由 于 具有 CSS3 代码 提示 功能 ,因此 很 受 前 端 开 发 专业 人 士 的 欢迎 。 


1.2 网 站 的 创建 和 制作 流程 


网 站 就 是 由 许多 网 页 及 资源 文件 (如 图 片 ) 组 成 的 一 个 集合 ,网 页 是 构成 网 站 的 基本 
元 素 。 通 常 把 网 站 内 的 所 有 文件 都 放 在 一 个 文件 夹 中 ,所 以 网 站 从 形式 上 看 就 是 一 个 文 
件 夹 。 

设计 良好 的 网 站 通常 是 将 网 页 文件 及 其 他 资源 文件 分 门 别 类 地 保存 在 相应 的 目录 
中 ,以 方便 管理 和 维护 ,这 些 网 页 通过 超 链接 组 织 在 一 起 。 图 1-4 是 一 个 网 站 目录 示意 
图 。 用 户 浏览 网 站 时 ,看 到 的 第 一 个 网 页 称 为 主页 (也 称 为 首页 ), 上 面 通常 设 有 网 站 导 
航 ,链接 到 站 内 各 主要 网 页 ,其 名 称 一 般 是 index. htm 或 index. html, 必 须 放 在 网 站 的 根 
目录 下 , 即 网 站 目录 是 首页 文件 的 直接 上 级 目录 。 一 个 网 站 对 应 一 个 网 站 目录 ,所 以 网 站 
目录 是 唯一 的 。 


录 ， 不 是 网 站 目录 





站 wowew-< 六 代 的 罗拉 二 


首页 文件 的 直接 上 级 
目录 ， 是 网 站 目录 


图 央 疼 口 聊 … 


图 1-4 网 站 目录 示意 图 


Web 





通常 在 网 站 目录 下 新 建 一 个 名 为 images 的 子 目录 ,用 于 保存 网 站 中 所 有 网 页 需要 调 
用 的 图 片 文 件 。 
因此 ,制作 网 站 的 第 1 步 是 在 硬盘 上 新 建 一 个 目录 (如 D:\web) ,作为 网 站 目录 。 网 
站 制作 完成 后 将 这 个 目录 中 的 所 有 内 容 上 传 到 远程 服务 器 中 就 可 以 了 。 





1.2.1 网 站 的 特征 


从 用 户 的 角度 看 ,设计 良好 的 网 站 一 般 具 有 如 下 几 个 特征 。 

(1) 拥有 众多 的 网 页 。 从 某 种 意义 上 说 ,建设 网 站 就 是 制作 网 页 ,网 站 主页 是 最 重要 
的 网 页 。 

(2) 拥有 一 个 主题 与 统一 的 风格 。 网 站 虽然 有 许多 网 页 ,但 作为 一 个 整体 , 它 必 须 有 
一 个 主题 和 统一 的 风格 。 所 有 的 内 容 都 要 围绕 这 个 主题 展开 ,和 主题 无 关 的 内 容 不 应 出 
现在 网 站 上 。 网 站 内 的 所 有 网 页 要 有 统一 的 风格 ,主页 是 网 站 的 首页 ,也 是 网 站 最 为 重要 
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的 网 页 ,所 以 主页 的 风格 往往 决定 了 整个 网 站 的 风格 。 

(3) 有 便捷 的 导航 系统 。 导 航 是 网 站 非常 重要 的 组 成 部 分 ,也 是 衡量 网 站 是 否 优秀 
的 一 个 重要 标准 。 设 计 良 好 的 网 站 都 具有 便捷 的 导航 ,可 以 帮助 用 户 以 最 快 的 速度 找到 
自己 需要 的 网 页 。 导 航 系 统 常用 的 实现 方法 有 导航 条 、 路 径 导航 ,链接 导航 等 。 

(4) 分 层 的 栏目 组 织 。 将 网 站 的 内 容 分 成 若干 个 大 栏目 ,每 个 大 栏目 的 内 容 都 放置 
在 网 站 目录 下 的 一 个 子 目录 中 ,还 可 将 大 栏目 再 分 成 若干 小 栏目 ,也 可 将 小 栏目 分 成 若干 
个 更 小 的 栏目 ,都 分 门 别 类 放 在 相应 的 子 目 录 下 ,这 就 是 网 站 采用 的 最 简单 的 层次 型 组 织 
结构 ,结构 清晰 的 网 站 可 大 大 方便 网 站 的 维护 和 管理 。 


1.2.2 网 站 的 开发 步骤 


网 站 开发 也 可 看 成 是 一 种 软件 开发 ,其 开发 过 程 可 分 为 前 期 工作 、 中 期 工作 和 后 期 工 
作 。 尽 管 本 书 讲授 的 内 容 主要 是 中 期 工作 ,但 网 站 开发 的 前 期 工作 对 网 站 开发 的 成 功 与 
否 起 着 非常 关键 的 作用 。 


1. 网 站 需求 分 析 与 定位 


假设 为 一 家 单位 或 部 门 制作 网 站 , 则 需求 分 析 首 先是 需要 了 解 该 单位 的 主要 职能 , 然 
后 结合 该 单位 的 实际 工作 需要 ,对 需求 进行 明确 和 细 化 ,从 而 确定 网 站 应 满足 的 设计 目标 
和 要 求 。 这 一 步 的 主要 任务 是 采集 和 提炼 用 户 需 求 。 其 关键 是 : 
(1) 明确 目标 ,和 弄 清 楚 用 户 的 真正 需求 ; 
(2) 有 效 沟通 ， 通常 用 户 的 需求 是 凌乱 的 不 完整 的 ,很 多 用 户 知道 自己 想 要 什么 ,但 
是 表达 不 出 来 。 这 需要 网 站 需求 分 析 人 员 深 入 企业 内 部 ,熟悉 用 户 的 业务 流程 。 


2. 确定 网 站 内 容 、 风 格 和 功能 


网 站 内 容 主要 是 来 源 于 建站 客户 提供 的 资料 , 若 客户 提供 的 资料 较 少 ,可 以 参考 同类 
网 站 ,适当 丰富 一 些 内 容 。 若 客户 提供 的 资料 很 多 , 则 要 分 清 主 次 ,整理 分 类 ,不 要 全 部 放 
在 网 站 上 。 网 站 内 容 可 以 是 文字 、 图 表 、 图 片 . 动 画 、 视 频 等 多 种 格式 。 

网 站 风格 应 以 网 站 性 质 和 网 站 内 容 为 基础 ,例如 ,如 果 是 企 事业 单位 的 门户 网 站 , 则 
网 站 风格 应 以 简洁 端庄 为 宜 ;如 果 是 娱乐 .旅游 网 站 , 则 网 站 风格 可 偏向 活泼 。 网 站 风格 
成 功 的 关键 是 避免 雷同 和 过 分 修饰 .即使 是 同一 类 型 的 网 站 ,也 应 该 有 自己 的 特点 、 自 己 
的 风格 。 

根据 用 户 的 需求 确定 网 站 的 功能 ,如 企业 网 站 应 具备 的 基本 功能 一 般 有 信息 发 布 与 
维护 \ 信 息 查询 、 网 上 订货 在 线 招聘 、 联 系 我 们 等 。 


3. 规划 网 站 栏目 


根据 企 事业 单位 业务 的 侧重 点 ,结合 网 站 定位 来 确定 网 站 的 栏目 。 开 始 时 可 能 会 因 
为 栏目 较 多 而 难以 确定 最 终 需 要 的 栏目 ,这 就 需要 展开 另 一 轮 讨论 ,需要 网 站 设计 人 员 和 
客户 在 一 起 阐述 自己 的 意见 ,一 起 反复 比较 ,将 确定 下 来 的 内 容 进行 归 类 ,从 而 确定 网 站 
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的 一 级 栏目 ,然后 对 每 个 栏目 中 的 内 容 进行 细 化 ,确定 二 级 栏目 (甚至 三 级 栏目 ) 等 。 最 终 
形成 网 站 栏目 的 树 状 结构 ,用 以 清晰 表达 站 点 结构 。 


4. 设计 网 页 效果 图 和 切 图 


网 页 效果 图 在 设计 之 前 应 先 用 铅笔 勾勒 一 个 草图 ,草图 主要 是 对 版 面 进行 划分 ,确定 
各 个 模块 在 网 页 中 的 大 体位 置 。 接 下 来 就 是 使 用 Photoshop 或 Fireworks 等 图 像 处 理 软 
件 绘制 网 页 效果 图 ,这 一 步 的 核心 任务 是 美术 设计 ,通俗 地 说 ,就 是 让 页 面 更 美观 、 更 漂 
亮 。 在 一 些 比较 大 的 网 页 开发 项 目 中 ,通常 都 会 有 专业 的 美工 参与 ,这 一 步 就 是 美工 的 
任务 。 
通常 一 个 网 站 中 有 成 百 上 千 个 页 面 ,但 实际 上 不 必 为 每 个 页 面 都 设计 网 页 效果 图 , 因 
为 网 站 中 的 页 面 一 般 分 为 三 类 , 即 首 页 .栏目 首 页 和 内 页 。 相 同类 型 的 页 面 ,其 布局 和 外 
观 都 是 相同 的 ,只 是 里 面 的 文字 信息 不 同 。 因 此 制作 网 页 效果 图 只 需要 分 别 制作 首页 、 栏 
目 首页 和 内 页 三 个 页 面 的 效果 图 。 我 们 一 般 都 是 先 制作 首页 的 效果 图 ,因为 首页 的 效果 
图 是 最 复杂 的 ,然后 再 对 首页 效果 图 的 中 间 区 域 进行 修改 ,制作 出 栏目 首页 和 内 页 的 效果 
图 。 如 果 要 制作 手机 版 网 站 ,还 需要 另外 设计 手机 网 站 的 首页 ,栏目 首页 和 内 页 。 

为 了 让 网 站 有 整体 感 ,应 该 在 所 有 页 面 中 放置 一 些 贯 穿 性 的 元 素 , 即 在 网 站 的 所 有 页 
面 中 都 出 现 的 元 素 。 例 如 ,网 站 中 所 有 网 页 的 头 部 .导航 条 和 页 尾 都 是 相同 的 。 

网 页 效果 图 应 该 按照 真实 网 页 大 小 1 : 1 的 比例 制作 ,并 且 尽 量 提供 Photoshop 或 
Fireworks 中 图 层 未 合并 的 原始 文件 。 这 样 在 将 效果 图 转换 成 真实 的 网 页 时 才能 方便 地 
获得 背景 图 案 , 各 个 模块 的 精确 大 小 ,在 页 面 中 的 位 置 及 文本 的 字体 大 小 、 字 体 类 型 等 
信息 。 

网 页 效果 图 制作 完成 后 ,还 必须 对 效果 图 进行 切片 ,因为 真实 的 网 页 并 非 一 张 图 片 ， 
而 是 将 许多 小 图 片 放 置 在 网 页 合适 的 位 置 上 。 网 页 切片 就 是 根据 网 页 的 需要 ,将 有 用 的 
图 片 从 网 页 效果 图 中 切 出 来 ,其 他 不 需要 的 图 片 ( 如 文字 块 区 域 . 单 色 背 景区 域 ) 则 可 以 售 
去 ,然后 再 在 对 应 的 区 域 填 充 文字 。 网 页 切片 需要 考虑 网 页 布局 采用 的 技术 。 使 用 表格 
布局 的 网 页 和 CSS 布局 的 网 页 所 需要 的 图 片 往往 是 不 相同 的 ,因此 切片 方式 也 不 相同 。 

提示 : 虽然 有 些 简 单 的 网 页 也 可 以 不 绘制 网 页 效果 图 ,而 是 分 别 制作 网 页 中 各 部 分 
的 图 片 ,再 把 它们 插入 到 网 页 中 对 应 的 位 置 上 。 但 这 样 做 的 缺点 也 是 相当 明显 的 ,由 于 各 
个 位 置 的 图 片 是 单独 绘制 的 ,容易 造成 网 页 整体 风格 不 统一 ,而 且 网 页 各 个 区 域 也 显得 是 
孤立 存在 的 ,过 渡 不 自然 。 因 此 要 制作 出 看 起 来 浑然 一 体 的 高 水 平 网 页 作品 ,绘制 网 页 效 
果 图 是 必 不 可 少 的 步骤 。 


5. 制作 静态 模板 页 面 


网 页 效果 图 设计 完成 后 , 接 下 来 就 是 根据 网 页 效果 图 设计 网 站 的 静态 模板 页 面 ,这 一 
步 的 要 求 是 制作 出 来 的 网 页 要 和 网 页 效果 图 尽量 相似 。 网 页 制作 人 员 只 有 熟练 掌握 网 页 
布局 的 技巧 才能 完成 。 

静态 模板 页 面 的 制作 过 程 ,也 应 遵循 先 首页 ,再 栏目 首页 ,最 后 内 页 的 过 程 。 这 是 因 
为 首页 最 复杂 ,并 且 首 页 中 的 很 多 网 页 元 素 都 可 以 提供 给 栏目 首页 和 内 页 重用 。 为 了 测 
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试 静态 页 面 的 整体 效果 ,可 以 在 页 面 中 输入 一 些 无 关 文字 。 在 将 页 面 转换 为 动态 页 面 时 ， 
再 将 这 些 静 态 文 字 转 换 为 动态 字段 即 可 。 


6. 绑 定 动态 数据 和 实现 后 台 功能 


目前 的 网 站 一 般 都 是 将 信息 保存 在 数据 库 中 的 动态 网 站 ,这 样 能 方 使 地 添加 、 删 除 和 
修改 网 站 中 的 信息 。 这 一 步 的 任务 就 是 将 静态 模板 页 转换 为 动态 网 站 。 为 此 ,需要 由 程 
序 员 根 据 功能 需求 来 编写 网 站 的 后 台 管理 程序 。 但 由 于 完全 自己 编写 后 台 程序 的 工作 量 
很 大 ,现在 更 流行 调用 一 个 通用 的 后 台 管理 系统 (也 称 为 内 容 管理 系统 ,简称 CMS) ,这 样 
开发 程序 的 工作 量 就 小 多 了 。 

调用 后 台 管 理 系统 的 步骤 一 般 是 : 首先 在 后 台 管 理 系统 中 添加 几 条 新 闻 记 录 , 然 后 
打开 后 台 管 理 系统 的 数据 库 查 看 标题 ,内容 等 字段 的 字段 名 。 最 后 在 前 台 的 静态 页 中 连 
接 数 据 库 并 绑 定 相关 内 容 对 应 的 字段 名 ,这 称 为 绑 定 动态 数据 ,这 样 前 台 页 面 就 可 以 显示 
数据 库 中 的 内 容 了 ,而 后 台 管理 系统 也 可 以 对 这 些 内 容 进行 添加 、 删 除 和 修改 。 


7. 整合 与 测试 网 站 


当 制 作 和 编程 工作 都 完成 以 后 ,就 需要 把 实现 各 种 功能 的 程序 和 页 面 进行 整合 。 整 
合 完成 后 ,需要 进行 内 部 测试 ,测试 成 功 后 即 可 将 网 站 目录 下 的 所 有 文件 上 传 到 服务 器 
上 ,一 般 采 用 FTP( 文 件 传输 协议 ) 上 传 。 

例如 ,假设 远程 服务 器 的 ftp 地 址 是 ftp://011. seavip. cn, 则 在 浏览 器 (或 Windows 
资源 管理 器 ) 的 地 址 栏 中 输入 ftp 地 址 ,这 时 会 弹出 “登录 身份 "对话 框 ,要 求 输入 用 户 名 
和 密码 ,输入 正确 后 ,就 会 显示 一 个 类 似 于 资源 管理 器 的 界面 ,表示 远程 服务 器 上 的 网 站 
目录 ,把 本 机 网 站 目录 中 的 文件 通过 拖 动 复制 到 该 窗口 中 的 目录 下 就 实现 了 文件 上 传 ,还 
可 以 对 远程 网 站 目录 中 的 文件 或 文件 夹 进行 删除 .新建 等 操作 。 


1.2.3 在 Dreamweaver 中 建立 站 点 


在 DW 中 ,“ 站 点 ”一 词 既 表示 网 站 ,又 表示 该 网 站 对 应 文件 夹 的 本 地 存储 位 置 。 在 
开始 建立 Web 站 点 之 前 ,我 们 需要 建立 站 点 文档 在 本 地 的 存储 位 置 ( 即 网 站 目录 )。DW 
站 点 可 组 织 与 Web 站 点 相关 的 所 有 文档 。 跟 踪 和 维护 链接 、 管 理 文件 ,共享 文件 以 及 将 
站 点 文件 传输 到 Web 服务 器 上 。 

要 制作 一 个 能 够 被 访问 者 浏览 的 网 站 ,首先 需要 在 本 机 上 制作 网 站 ,然后 上 传 到 远程 
服务 器 上 去 。 放 置 在 本 地 磁盘 上 的 网 站 目录 被 称 为 "本 地 站 点 ”, 传 输 到 远程 Web 服务 器 
中 的 网 站 被 称 为 “远程 站 点 ”。DW 提供 了 对 本 地 站 点 和 远程 站 点 的 强大 管理 功能 。 

应 用 DW 不 仅 可 以 创建 单独 的 网 页 ,还 可 以 创建 完整 的 网 站 。 使 用 DW 建立 网 站 
时 ,首先 必须 告诉 DW 本 地 站 点 对 应 哪个 硬盘 目录 , 即 把 我 们 在 硬盘 上 建立 的 网 站 主 目 
录 定 义 为 DW 的 站 点 。 因 此 ,在 DW 下 新 建站 点 是 用 DW 开发 网 站 的 第 一 步 。 

提示 : 虽然 不 新 建站 点 也 可 以 使 用 DW 编辑 单个 网 页 ,但 是 强烈 建议 初学 者 在 制作 
网 站 之 前 一 定 要 先 新 建站 点 ,因为 新 建站 点 之 后 : 
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(1) 在 网 页 之 间 建 立 超 链 接 时 ,DW 能 使 站 点 内 的 网 页 以 相对 URL 的 方式 进行 链 
接 , 这 种 形式 的 超 链接 代码 在 上 传 到 服务 器 后 也 无 须 做 任何 更 改 ; 

(2) 新 建 网 页 时 所 有 的 网 页 文件 都 会 自动 保存 在 站 点 目录 中 ,便于 管理 ; 

(3) 在 预览 动态 网 页 时 ,DW 还 能 使 用 已 设置 好 的 URL 运行 该 动态 网 页 。 

下 面 介 绍 在 DW 中 新 建站 点 的 步骤 。 

(1) 启动 DW ,在 DW 中 执行 “站 点 ”>“ 新 建站 点 ”菜单 命令 ,就 会 弹出 新 建站 点 对 话 
框 。 这 个 对 话 框 分 为 基本 ”和 “高 级 ”两 个 选项 卡 ,“ 基 本 ”选项 卡 可 分 步骤 完成 一 个 站 点 
的 建立 ,“ 高 级 ”选项 卡 则 是 用 来 直接 设置 站 点 的 各 个 属性 。 在 “基本 ”对 话 框 中 输入 站 点 
的 名 称 ( 如 hynu) ,对 于 静态 站 点 ,HTTP 地 址 不 需要 设置 ,如 图 1-5 所 示 。 





四 
基本 | 高 级 | 
站 点 定义 4 





ee Drewnweaver 中 的 站 点 是 文件 和 文件 来 的 集合 ， 它 对 应 于 服务 器 上 的 Web 


您 打算 为 悠 的 站 点 起 什么 名 字 ? 
hyn 
示例 ;MySite 


您 的 站 点 的 HTTF 地 址 (WRL) 是 什么 ? 
ttp /7 
示例 : http://wew. myifost con/mySite 


SE 取消 更 且 


图 1-5 新 建站 点 对 话 框 (一 ) 











(2) 单 击 “下 一 步 ? 按 钮 ,在 弹出 的 如 图 1-6 所 示 的 对 话 框 中 选择 “ 否 ,我 不 想 使 用 服 
务 器 技术 。”, 此 对 话 框 用 于 设置 站 点 文件 类 型 。 如 果 要 制作 动态 网 页 , 则 应 选择 “是 ,我 想 
使 用 服务 器 技术 。”, 此 时 将 出 现 一 个 选择 具体 动态 网 页 技术 的 下 拉 列 表 框 ,可 选择 需要 的 
动态 网 页 技术 。 


hynu 的 站 点 定义 为 


编辑 文件 ,第 2 部 分 
您 是 否 打算 使 用 服务 器 技术 ,加 ColdFusion、ASP. RET、ASP、JSP 或 PHP? 


人 次， 我 不 想 诺 用 李 务 器 技 术 。 人 0】 
个 是 ， 我 想 使 用 服务 器 技术 。 QD) 





《上 - 步 @g)| [下 =- 步 中 让 取消 | 帮助 | 





图 1-6 新 建站 点 对 话 框 (二 ) 
(3) 单 击 “ 下 一 步 ”按钮 ,弹出 如 图 1-7 所 示 的 对 话 框 , 因 为 通常 我 们 都 是 在 本 地 机 器 
上 做 好 网 站 ,再 上 传 到 远程 的 服务 器 上 去 ,所 以 选择 “编辑 我 的 计算 机 上 的 本 地 副本 ,完成 
后 再 上 传 到 服务 器 (推荐 ) ”这 一 默认 选项 。 
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Xx 
基本 | 高 级 | 


站 点 定义 {< 


篇 辑 文件 ,第 3 部 分 





在 开发 过 程 中 ， 您 打工 如 何 使 用 您 的 文件 ? 
人 编辑 我 的 计算 机 上 的 本 地 副本 ， 完 成 后 再 上 传 到 服务 器 ( 推荐 ) 邓 ) 
个 使 用 本 地 网 络 直 接 在 服务 器 上 进行 编辑 中 ) 

您 将 把 文件 存储 在 计算 机 上 的 什么 位 置 ? 


正 :\ 同 页 制作 上 课 \DPo\ | 
sw] wh | wm | 


图 1-7 新 建站 点 对 话 框 (三 ) 











对 于 选项 “您 将 把 文件 存储 在 计算 机 上 的 什么 位 置 ?”, 显 然 , 应 该 把 制作 的 网 页 保存 
在 网 站 主 目录 中 。 因 此 ,这 里 应 该 输入 (或 选择 ) 网 站 主 目录 的 路 径 。 

当 把 已 经 新 建 好 的 网 站 主 目录 作为 DW 的 站 点 后 ,DW 就 会 把 以 后 新 建 的 网 页 文件 
默认 都 保存 在 该 站 点 目录 中 ,并 且 在 站 点 目录 内 ,网 页 之 间 的 链接 会 使 用 相对 链接 的 
故 式 。 

提示 : 对 网 站 目录 和 网 页 文件 命名 应 避免 使 用 中 文 , 尤 其 对 于 动态 网 页 或 将 网 页 上 
传 到 服务 器 后 ,使 用 中 文 很 容易 出 问题 。 例 如 图 1-7 中 站 点 目录 DEMO 就 不 是 中 文 。 

(4) 单 击 “下 一 步 ? 按 钮 ,在 “您 如 何 连接 到 远程 服务 器 ?” 


下 拉 列 表 框 中 选择 “无 ”。 EA | 
(5) 单 击 * 下 一 步 ”按钮 ,弹出 站 点 信息 总 结对 话 框 , 单 击 


“完成 ”按钮 就 完成 了 一 个 本 地 站 点 的 定义 。 

(6) 定义 好 本 地 站 点 之 后 ,DW 窗口 右 侧 的 “文件 ”面板 
( 见 图 1-8) 就 会 显示 刚才 定义 的 站 点 的 目录 结构 ,可 以 在 此 面 
板 中 右 击 , 在 站 点 目录 内 新 建文 件 或 子 目录 ,这 与 通过 资源 管 
理 器 在 网 站 目录 中 新 建文 件 或 目录 的 效果 是 一 样 的 。 

如 果 要 修改 定义 好 的 站 点 ,只 需 执行 “站 点 ”> “管理 站 
点 ”菜单 命令 ,选中 要 修改 的 站 点 名 , 单 击 “编辑 ”按钮 ,就 可 在 
站 点 定义 对 话 框 中 对 原来 的 设置 进行 修改 。 





1.3 ”Web 服务 器 与 浏览 器 


在 学 习 网 页 制作 之 前 ,有 必要 了 解 “ 浏 览 器 ”和 “服务 器 ”的 概念 。 网 站 浏览 者 坐 在 计 
算 机 前 浏览 各 个 网 站 上 的 内 容 , 实 质 上 是 从 远程 的 计算 机 中 读 取 一 些 内 容 , 然 后 在 本 地 的 
计算 机 中 显示 出 来 的 过 程 。 提 供 内 容 信息 的 远程 计算 机 称 为 “服务 器 ”, 浏 览 者 使 用 的 本 
地 计算 机 称 为 “客户 端 ”", 客 户 端 使 用 “浏览 器 "程序 ,就 可 以 通过 网 络 接收 到 “服务 器 * 上 的 
网 页 以 及 其 他 文件 ,因此 用 户 浏览 的 网 页 是 保存 在 服务 器 上 的 。 服 务 器 可 以 同时 供 许多 
不 同 的 客户 端 访问 。 
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1.3.1 Web 服务 器 的 作用 


访问 网 页 具体 的 过 程 是 : 当 用 户 的 计算 机 接 入 互联 网 后 ,通过 在 浏览 器 中 输入 网 址 
发 出 访问 某 个 网 站 的 请 求 , 然 后 这 个 网 站 的 服务 器 就 把 用 户 请 求 的 网 页 文件 传送 到 用 户 
的 浏览 器 中 ,即将 文件 下 载 到 用 户 计算 机 中 ,浏览 器 再 解析 并 显示 网 页 文件 内 容 , 这 个 过 
程 如 图 1-9 所 示 。 






mm | 
| 一 


浏览 器 。。。 浏览 器 
图 1-9 服务 器 与 浏览 器 之 间 的 关系 





浏览 器 











对 于 静态 网 页 (不 含有 服务 器 端 代码 ,不 需要 Web 服务 器 解释 执行 的 网 页 ) 来 说 ， 
Web 服务 器 只 是 到 服务 器 的 硬盘 中 找到 该 网 页 并 发 送 给 用 户 计算 机 ,起 到 的 只 是 查找 和 
传输 文件 的 作用 。 因 此 在 测试 静态 网 页 时 可 不 安装 Web 服务 器 ,因为 制作 网 页 时 网 页 还 
保存 在 本 地 计算 机 中 ,可 以 手工 找到 该 网 页 所 在 的 目录 ,双击 网 页 文件 就 能 用 浏览 器 打 
型 它 。 


1.3.2 浏览 器 的 种 类 和 作用 


浏览 器 是 供用 户 浏览 网 页 的 软件 。 其 功能 是 读 取 HTML 等 网 页 代码 并 进行 解释 以 
生成 人 们 看 到 的 网 页 。 


1. 浏览 器 的 种 类 


浏览 器 的 种 类 很 多 ,目前 常见 的 浏览 器 有 Google Chrome、IE( 及 Edge)、Firefox、 
Safari、Opera 等 。 图 1-10 是 各 种 浏览 器 的 徽标 。 

(1) Google Chrome 是 目前 最 流行 的 浏览 器 ,该 浏览 器 具有 运行 速度 快 、 占 用 资源 少 
的 特点 ,对 HTML5 与 CSS3 的 支持 也 非常 好 ,更 重要 的 是 , 安 卓 手机 操作 系统 自 带 的 浏 
览 器 与 Chrome 浏览 器 为 同一 内 核 , 因 此 , 它 还 能 测试 网 页 在 手机 上 的 显示 效果 。 

















《HTML5+CSS3 Web 前 端 开 发 》 
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Chrome Firefox Safari Opera 
图 1-10 各 种 常见 的 浏览 器 


(2) IE(Internet Explorer) 是 Windows 自 带 的 浏览 器 。 目 前 常用 的 IE 浏览 器 版 本 
很 多 ,从 IE6 到 IE11, 以 及 Windows 10 系统 的 Edge 浏览 器 ,各 种 版 本 的 下 浏览 器 对 网 
页 的 解析 区 别 又 很 大 。 其 中 IE6 对 Web 标准 的 支持 不 太 好 ,并 存在 一 些 明 显 的 问题 ,而 
IE8 开始 对 Web 标准 的 支持 得 到 了 显著 改善 。IE9 已 经 部 分 支持 HTML5 和 CSS3,IE10 
开始 全 面 支持 HTML5 和 CSS3。 目 前 ,制作 网 页 时 ,一 般 应 考虑 兼容 IE8 以 上 的 浏 
览 器 。 

(3) Firefox 是 网 页 设计 领域 推荐 的 标准 浏览 器 , 它 对 Web 标准 和 CSS3 有 很 好 的 支 
持 ,并 且 是 最 先 支持 HTML5 的 浏览 器 。 

(4) Safari 最 初 是 苹果 电脑 (包括 iPad、 iPhone) 上 的 浏览 器 , 目前 Safari 也 有 
Windows 版 本 ,该 浏览 器 在 解释 JavaScript 脚本 时 的 速度 很 快 。 

(5) Opera 是 一 款 小 巧 的 浏览 器 ,在 手持 设备 的 操作 系统 上 用 得 较 多 。 

目前 ,网 页 在 各 种 浏览 器 中 的 显示 效果 有 时 还 不 完全 相同 , 随 着 Web 标准 的 推广 , 按 
照 Web 标准 制作 的 网 页 在 各 种 浏览 器 中 的 显示 效果 将 趋 于 一 致 。 


2. 浏览 器 的 内 核 


浏览 器 最 重要 或 者 说 核心 的 部 分 是 “Rendering Engine”, 习 惯 上 称 之 为 浏览 器 内 核 ， 
负责 对 网 页 语法 的 解释 (包括 HTML CSS JavaScript) 和 执行 。 
目前 主流 浏览 器 的 内 核 有 4 种 ,如 表 1-1 所 示 。 
表 1-1 浏览 器 内 核 及 其 对 应 的 浏览 器 





内 核 名 称 典型 浏览 器 CSS3 私有 属性 前 级 
Webkit Chrome Safari -webkit- 
Gecko Firefox -moz- 
Trident 下 -ms- 
Presto Opera > 











浏览 器 解释 网 页 代码 的 过 程 类 似 于 程序 编译 器 编译 程序 源 代 码 的 过 程 , 都 是 通过 执 
行 代码 (HTML 代码 或 程序 代码 ) 再 生成 界面 (网 页 或 应 用 程序 界面 ) ,不 同 的 是 浏览 器 对 
HTML 等 代码 是 解释 执行 的 。 不 同 的 浏览 器 内 核对 网 页 代码 的 解释 并 不 完全 相同 ,因此 
同一 网 页 在 不 同 内 核 的 浏览 器 中 的 显示 效果 就 有 可 能 不 同 。 作 为 网 页 制作 者 ,应 追求 网 
页 尽 可 能 在 各 种 浏览 器 中 有 一 致 的 显示 效果 的 目标 。 建 议 测试 网 页 时 至 少 应 将 网 页 在 
Chrome 和 IE8 两 种 浏览 器 上 运行 一 遍 , 以 测试 网 页 的 浏览 器 兼容 性 。 
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1.4 URL 与 域名 


1. URL 的 含义 和 格式 


用 户 使 用 浏览 器 访问 网 站 时 ,需要 在 浏览 器 的 地 址 栏 中 输入 网 址 (网 站 地 址 ) ,这 个 网 
址 就 是 URLCUniform Resource Locator, 统 一 资源 定位 符 )。URL 信息 会 通过 HTTP 请 
求 发 送 给 服务 器 ,服务 器 根据 URL 信息 返回 对 应 的 资源 文件 到 浏览 器 。 

URL 是 Internet 上 任何 资源 的 标准 地 址 ,为 了 使 人 们 能 访问 Internet 上 的 任意 一 个 
网 页 (或 其 他 文件 ) ,每 个 网 站 上 的 每 个 网 页 (或 资源 文件 ) 在 Internet 上 都 有 一 个 唯一 的 
URL 地 址 ,通过 网 页 的 URL, 浏 览 器 就 能 定位 到 目标 网 页 或 资源 文件 。 就 好 像 邮 寄 信 件 
时 通过 地 址 和 姓名 就 能 让 邮局 定位 到 收 信人 一 样 。 

URL 的 一 般 格 式 如 下 ,图 1-11 是 一 个 URL 的 示例 。 


协议 名 :// 主 机 名 [: 端 口号 ] [/ 目 录 路 径 / 文 件 名 ] [# 锚 点 名 ] 


区 名 ”主机 名 (域名 ) 
http:/ n /web/201609/first.html 
CT 


主机 名 域名 ”目录 路 径 。 ”文件 名 
图 1-11 URL 的 格式 示例 


URL 中 协议 名 后 必须 接 “://”, 其 他 各 项 之 间 用 “/” 隔 开 , 例 如 图 1-11 中 的 URL 表 
示 信 息 被 放 在 一 台 被 称 为 www 的 服务 器 上 ,hynu. cn 是 一 个 已 被 注册 的 域名 ,cn 表示 中 
国 。 有 时 也 把 主机 名 和 域名 合 称 为 主机 名 (或 主机 头 、 域 名 )。 域 名 对 应 服务 器 上 的 网 站 
目录 (如 D:\hynu),web/201609/ 是 服务 器 网 站 目录 下 的 目录 路 径 ,而 first. html 是 位 于 
上 述 目录 下 的 文件 名 ,因此 该 URL 能 够 让 我 们 访问 到 这 个 文件 。 

在 URL 中 ,常见 的 协议 名 有 三 种 ,URL 的 示例 如 下 : 

。 http 一 一 超 文本 传输 协议 ,用 于 传送 网 页 。 

。 ftp 一 一 文件 传输 协议 ,用 于 传送 文件 。 

。 file 访问 某 台 主 机 上 共享 文件 的 协议 。 如 果 访 问 的 是 本 机 , 则 主机 头 可 以 省 

略 , 但 斜 杠 不 能 省 略 。 





http://bbs.runsky.com:8080/bbs/forumdisplay.php#fid 
£tp://219.216.128-15/ 
file:///pub/files/foobar.txt 


2. 域名 与 主机 的 关系 


在 URL 中 ,主机 名 通常 是 域名 或 IP 地 址 。 最 初 ,域名 是 为 了 方便 人 们 记忆 IP 地 址 
而 设立 的 ,使 用 户 可 以 输入 域名 而 不 必 输 入 难 记 的 IP 地 址 。 但 现在 多 个 域名 可 对 应 同一 
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个 全 地 址 (一 人 台 主 机 ), 即 在 一 台 主机 上 可 架设 多 个 网 站 ,这 些 网 站 的 存放 方式 称 为 “虚拟 
主机 ”方式 ,此 时 由 于 一 个 人 P 地 址 (一 台 主 机 ) 对 应 多 个 网 站 ,就 不 能 采用 输入 IP 地 址 的 
方式 访问 网 站 了 ,而 只 能 在 URL 中 输入 域名 。Web 服务 器 为 了 区 别 用 户 请 求 的 是 这 台 
主机 上 的 哪个 网 站 ,通常 必须 为 每 个 网 站 设置 “主机 头 "来 区 别 这 些 网 站 。 

因此 域名 的 作用 有 两 个 : 一 是 将 域名 发 送 给 DNS 服务 器 解析 得 到 域名 对 应 的 IP 地 
址 以 便 与 该 卫 地 址 对 应 的 服务 器 进行 通信 ;二 是 将 域名 信息 发 送 给 Web 服务 器 ,通过 域 
名 与 Web 服务 器 上 设置 的 “主机 头 ? 进 行 匹配 ,确认 客户 端 请 求 的 是 哪个 网 站 ,如 图 1-12 
所 示 。 若 客户 端 没 有 发 送 域名 信息 给 Web 服务 器 ,例如 直接 输入 IP, 则 Web 服务 器 将 打 
开 服务 器 上 的 默认 网 站 。 


Co 和 Nm 


代码 。 














发 送 域名 : ec.hynu.cn 








| 返回 IP 地 址 :59.51.24.36 


DNS 服务 器 


i 连接 59.51.24.36， 发 送 
浏览 器 a 
| 域名 信息 ec.hynu.cn 








将 主机 头 为 ec.hynu.cn 对 应 
的 网 站 发 送 给 浏览 器 Web 服务 器 
图 1-12 浏览 器 输入 域名 访问 网 站 的 过 程 


习 题 
.网 页 的 本 质 是 ( ) 文 件 。 
A. 图 像 B. 纯 文本 
C. 可 执行 程序 D. 图 像 和 文本 的 压缩 


.对 于 采用 虚拟 主机 方式 的 多 个 网 站 ,域名 和 IP 地 址 是 ( ) 的 关系 。 


A. 一 对 多 B. 一 对 一 C. 多 对 一 D. 多 对 多 


. 常见 的 浏览 器 的 内 核 有 S sx uy 

.请 解释 http://www. moe. gov. cn/business/moe/115078. html 的 含义 。 

. 简 述 Web 前 端 与 网 页 设计 两 个 概念 的 异同 。 

. HTML 是 什么 的 缩写 ? 它 与 程序 设计 语言 有 何 区 别 ? 

. 简 述 网 站 的 制作 步骤 。 

. 使 用 DW 新 建 名 为 “aiw” 的 站 点 ,该 站 点 对 应 硬盘 上 的 D:\aiw 网 站 文件 夹 。 

. 在 计算 机 上 安装 Chrome 浏览 器 ,并 分 别 使 用 IE 和 Chrome 浏览 器 查看 网 页 的 源 





第 2 章 HTML 


网 页 是 用 HTML 编写 的 ,HTML 是 所 有 网 页 制作 技术 的 基础 。 无 论 是 在 Web 上 发 
布 信息 ,还 是 编写 可 供 交 互 的 程序 ,都 离 不 开 HTML 语言 。 


2.1 HTML 概述 


HTML(Hypertext Markup Language) 即 超 文本 置 标语 言 。 网 页 是 用 HTML 书写 
的 一 种 纯 文本 文件 。 用 户 通 过 浏览 器 所 看 到 的 包含 了 文字 、 图 像 . 动 画 等 多 媒体 信息 的 每 
一 个 网 页 ,其 实质 都 是 浏览 器 对 该 纯 文 本 文件 进行 了 解释 ,并 引用 相应 的 图 像 .动画 等 资 
源 文件 , 才 生 成 了 多 姿 多 彩 的 网 页 。 

HTML 是 一 种 标记 语言 。 可 以 认为 ,HTML 代码 就 是 “普通 文本 十 HTML 标记 ”， 
而 不 同 的 HTML 标记 能 表达 不 同 的 效果 ,如 段落、 图 像 \ 表 格 、 表 单 等 。 


2.1.1 HTML 文档 的 结构 


HTML 文件 本 质 上 是 一 个 纯 文本 文件 ,只 是 它 的 扩展 名 为 . htm 或 . html。 任 何 纯 文 
本 编辑 软件 都 能 创建 HTML 文件 。 图 2-1 是 HTML 文档 的 基本 结构 。 


<html> 
r- 一 <head> 
<title> 第 一 个 网 页 </title> 一 一 @ 
— </head> 
-一 <body> 
欢迎 学 习 网 页 设计 
-一 </body> 
</html> 


图 2-1 HTML 文档 的 基本 结构 





© 











从 图 2-1 可 以 看 出 ,HTML 代码 分 为 4 部 分 ,其 中 各 部 分 含义 如 下 。 

(1) 过 html 二 … 达 /html 这 一 一 告诉 浏览 器 HTML 文档 的 开始 和 结束 位 置 , HTML 
文档 包括 head 部 分 和 body 部 分 。HTML 文档 中 所 有 的 内 容 都 应 该 在 这 两 个 标记 之 间 ， 
一 个 HTML 文档 总 是 以 二 html> 开 始 ,以 二 /html 二 结束 。 

(2) 二 head 放 … 二 /head 记 一 一 HTML 文档 的 头 部 标记 , 头 部 主要 提供 文档 的 描述 
信息 ,head 部 分 的 所 有 内 容 都 不 会 显示 在 浏览 器 窗口 中 ,在 其 中 可 以 放置 页 面 的 标题 
<title 之 以 及 页 面 的 类 型 .字符 编码 、 链 接 的 其 他 脚本 或 样式 文件 等 内 容 。 

(3) <title>…< 反 /title> 一 一 定义 页 面 的 标题 ,将 显示 在 浏览 器 的 标题 栏 中 。 

(4) 二 body>…< 到 /body> 一 一 用 来 指明 文档 的 主体 区 域 ,主体 包含 Web 浏览 器 页 
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面 显示 的 具体 内 容 ,因此 网 页 所 要 显示 的 内 容 都 应 放 在 这 个 标记 内 。 
提示 : HTML 标记 之 间 只 可 以 相互 嵌 套 ,如 二 head 二 一 title 二 … 志 /title 二 
所/head> ,但 绝 不 可 以 相互 交错 ,如 二 head 盖 一 title 盖 … 一 /head 盖 二 /title 二 是 错误 的 。 
用 户 可 以 打开 Windows 中 的 记事 本 ,在 记事 本 中 输入 "| 
图 2-1 中 的 代码 。 输 入 完成 后 , 单 击 “ 保 存 " 菜 单项 ,注意 , 先 文件 中 ，y| 凶 | 如 
在 “保存 类 型 "中 选择 “所 有 文件 ", 再 输入 文件 名 为 2-1 BE 
. html。 单 击 "保存 ”按钮 ,就 新 建 了 一 个 扩展 名 为 . html 的 Ey 司 
网 页 文件 ,可 以 看 到 其 文件 图 标 为 浏览 器 图 标 ,双击 该 文 
件 ,浏览 器 就 会 打开 如 图 2-2 所 示 的 网 页 。 
说 明 : 本 书 接 下 来 的 内 容 为 了 简化 无 关 代码 ,通常 会 4 
略 一 head 二 一 html 之 和 一 body 之 标记 ,读者 可 将 简化 后 的 页 面 内 容 代 码 放 和 人 到 
二 body 二 与 二 /body 二 之 间 。 





图 2-2 ”2-1. html 在 浏览 器 
中 的 显示 效果 


2.1.2 Dreamweaver 的 开发 界面 


Dreamweaver 为 网 页 制作 提供 了 简洁 友好 的 开发 环境 ,DW 的 工作 界面 包括 视图 窗 
口 .属性 窗口 .工具 栏 和 浮动 面板 组 等 ,如 图 2-3 所 示 。 





Er 





BB inages 
BD Seripts 
司 index hl UB WML 7. 


号 :me ess 11B Casead. 

















2-3 ”Dreamweaver CS3 的 工作 界面 


DW 的 视图 窗口 可 在 “代码 视图 “设计 视图 ”和 *“ 拆 分 视图 ”之 间 切 换 。 

(1)“ 设 计 视 图 ”的 作用 是 帮助 用 户 以 “所 见 即 所 得 ”的 方式 编写 HTML 代码 , 即 通过 
一 些 可 视 化 的 方式 自动 编写 代码 ,减少 用 户 手 工 书写 代码 的 工作 量 。DW 的 设计 视图 区 
含 了 面向 对 象 操 作 的 思想 , 它 把 所 有 的 网 页 元 素 都 看 成 是 对 象 ,在 设计 视图 中 编写 














HTML 的 过 程 就 是 插入 网 页 元 素 , 再 设置 网 页 元 素 的 属性 。 

(2) “代码 视图 ?供用 户 手工 编写 或 修改 代码 ,因为 在 网 页 制作 过 程 中 ,有 些 操作 不 能 
(或 不 方便 ) 在 设计 视图 中 完成 ,此 时 用 户 可 单 击 * 代 码 "按钮 ,切换 到 代码 视图 直接 编写 或 
修改 代码 ,代码 视图 拥有 代码 提示 的 功能 ,即使 是 手工 编写 代码 ,速度 也 很 快 。 

(3)“ 拆 分 视图 ”同时 显示 设计 视图 和 代码 视图 ,在 用 户 需要 寻找 代码 与 其 对 应 的 网 
页 元 素 时 可 切换 到 这 种 视图 。 

为 了 提高 网 页 制作 的 效率 ,建议 用 户 首先 在 “设计 视图 ”中 插入 主要 的 HTML 元 素 
(尤其 是 像 列表 、 表 格 或 表单 等 复杂 的 元 素 ), 然 后 切换 到 “代码 视图 ”对 代码 的 细节 进行 
修改 。 

注意 : 由 于 网 页 本 质 上 是 HTML 代码 ,在 设计 视图 中 的 可 视 化 操作 实质 上 仍然 是 编 
写 代 码 。 因 此 可 以 在 设计 视图 中 完成 的 工作 一 定 也 可 以 在 代码 视图 中 完成 ,也 就 是 说 ,以 
编写 代码 的 方式 制作 网 页 是 万 能 的 ,因此 要 重视 对 HTML 代码 的 学 习 。 





2.1.3 使 用 DW 新 建 HTML 文件 


打开 DW, 在 “文件 ”菜单 中 选择 “新 建 " 命 令 ( 快 捷 键 为 Ctrl 十 N) ,在 新 建文 档 对 话 框 
中 选择 “基本 页 ”>HTML, 单 击 “ 创 建 "按钮 就 会 出 现 网 页 的 设计 视图 。 在 设计 视图 中 可 
输入 网 页 内 容 , 然 后 保存 文件 (执行 “文件 ”保存 ”命令 ,快捷 键 为 Ctrl 十 S, 第 一 次 保存 
时 会 要 求 输入 网 页 的 文件 名 ) ,就 新 建 了 一 个 HTML 文件 ,最 后 可 以 按 F12 键 在 浏览 器 
中 预览 网 页 ,也 可 以 在 保存 的 文件 夹 中 找到 该 文件 双击 运行 。 

注意 : 网 页 在 DW 设计 视图 中 的 效果 和 浏览 器 中 显示 的 效果 并 不 完全 相同 ,所 以 测 
试 网 页 时 应 按 F12 键 在 浏览 器 中 预览 最 终 效 果 。 


2.1.4 HTML 标记 


标记 (tags, 也 称 标签 ) 是 HTML 文档 中 一 些 有 特定 含义 的 符号 ,这 些 符号 用 来 指明 
内 容 的 含义 或 结构 。HTML 标记 由 一 对 尖 括 号 有 

“二 >" 和 标记 名 组 成 。 标 记分 为 “起 始 标记 ”和 * 结 束 

标记 "两 种 。 两 者 的 标记 名 相同 ,只 是 结束 标记 名 前 

多 了 一 个 “/”。 例 如 在 图 2.4 中 ,二 > 为 起 始 标 记 ， <b> 标 记 的 内 容 </b> 
一 /二 为 结束 标记 ,其 中 “b” 是 标记 名 称 ,表示 “ 粗 。 

体 *。 尽 管 HTML 标记 名 是 不 区 分 大 小 写 的 ,但 推荐 。 起 办 标记 第 于 标记 
使 用 小 写字 母 ,因为 XHTML 标准 要 求 标记 名 必须 。” 图 24 HTML 的 标记 结构 


小 写 




















1. 单 标记 和 双 标 记 
大 多 数 标记 都 是 成 对 出 现 的 , 称 为 双 标记 ,如 二 p 记 …<=/p 这 、<table>… 达 /table>。 
有 少数 标记 只 有 起 始 标 记 , 这 样 的 标记 称 为 单 标记 ,如 换行 标记 二 br /二 ,其 中 br 是 标记 
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名 ,表示 换行 。XHTML 规定 单 标记 也 必须 封闭 ,但 HTML5 没有 该 要 求 , 可 以 写成 
<br>。 


2. 标记 带 有 属性 时 的 结构 


实际 上 ,标记 一 般 还 可 以 带 有 若干 属性 (attribute) ,属性 用 来 对 元 素 的 特征 进行 具体 
描述 。 属 性 只 能 放 在 起 始 标记 中 ,属性 和 属性 之 间 用 空格 隔 开 , 属 性 包括 属性 名 和 属性 值 
(value) ,它们 之 间 用 “三 ”分 开 , 如 图 2-5 所 示 。 


属性 名 和 值 之 间 用 “=” 分 隔 
属性 名 值 属性 名 值 


<img prdiog drohol of bird" /> 


图 2-5 带 有 属性 的 HTML 标记 结构 


例 2-1: 讨论 下 列 HTML 标记 的 写法 错 在 什么 地 方 (答案 略 ) 。 

© 二 img "birthday.jpg " /> 

©@ 二 i Congratulations! <i> 

©® <a href= "file. html">linked text</a href= "file. html"> 

@ <p>This is a new paragraph=<\p> 

© = li>The list item< /li> 

提示 : 把 HTML 标记 (如 二 p 记 ,二 /p 记 ) 和 标记 之 间 的 内 容 的 组 合 称 为 HTML 元 
。HTML 元 素 可 分 为 “有 内 容 的 元 素 ” 和 “ 空 元 素 ” 两 种 。“ 有 内 容 的 元 素 ” 由 起 始 标 记 、 
结束 标记 和 两 者 之 间 的 内 容 组 成 ,其 中 元 素 内 容 既 可 以 是 文字 内 容 , 也 可 以 是 其 他 元 素 。 
“ 空 元 素 ” 是 只 有 起 始 标 记 而 没有 结束 标记 和 元 素 内 容 的 元 素 ,如 二 br 二 。 


竖 小 


2.1.5 常见 的 HTML 标记 及 属性 


网 页 中 的 文本 、 图 像 、 超 链接 、 表 格 等 各 种 元 素 ,其 实质 上 都 是 使 用 对 应 的 HTML 标 

记 实 现 的 。 要 在 网 页 中 添加 各 种 网 页 元 素 , 只 要 在 HTML 代码 中 插入 对 应 的 HTML 标 

记 并 设置 属性 即 可 。HTML5 中 定义 的 标记 总 共有 100 多 个 ,但 是 常用 的 HTML 标记 只 

有 下 面 列 出 的 40 多 个 ,这 些 标记 及 其 含义 必须 熟 记 下 来 。 表 2-1 对 标记 按 用 途 进 行 了 
表 2-1 HTML 标记 的 分 类 











类 别 标记 名 称 
文档 结构 html, head, body 
头 部 标记 title, meta, link, style, script 
文本 结构 标记 p, hl~h6, pre, br, hr 


























续 表 
类 别 标记 名 称 
列表 标记 ul, ol, li, dl, dt, dd 
超 链接 标记 a, map, area 
图 像 及 媒体 元 素 标记 img, embed, object, video,audio 
表格 标记 table, tr, td, th, tbody 
表单 标记 form, input, textarea, select, option, fieldset, legend, label 
容器 标记 div, span 





HTML 还 为 标记 定义 了 许多 的 属性 ,有 些 属性 是 所 有 标记 都 具有 的 , 称 为 公共 属性 ; 
而 大 部 分 属性 是 某 些 标记 独 有 的 , 称 为 特有 属性 。 表 2-2 列 出 了 所 有 HTML 标记 具有 的 
公共 属性 和 某 些 标记 的 特有 属性 。 


表 2-2 HTML 标记 的 一 些 常见 的 属性 





公共 属性 含 义 特有 属性 含 沈 
style 为 元 素 引 入 行内 CSS 样式 align 定义 元 素 的 水 平 对 齐 方式 
class 为 元 素 定义 一 个 类 名 Src 定义 元 素 引 用 的 文件 的 URL 
id 为 元 素 定义 一 个 唯一 的 id 名 href 定义 超 链接 所 指向 的 文件 的 URL 
name 为 元 素 定 义 一 个 名 字 target 定义 超 链 接 中 目标 文件 的 打开 方式 
title 定义 鼠标 指向 元 素 时 的 提示 文字 type 定义 表单 元 素 的 类 型 





2.2 在 网 页 中 添加 文本 和 图 像 


在 网 页 中 ,文本 和 图 像 是 最 基本 的 两 种 网 页 元 素 , 文 本 和 图 像 在 网 页 中 可 以 起 到 传递 
信息 、 美 化 页 面 \ 点 明 主题 等 作用 。 在 网 页 中 添加 文本 和 图 像 并 不 难 , 主 要 问题 是 如 何 编 
排 这 些 内 容 以 及 控制 它们 的 显示 方式 ,让 文本 和 图 像 看 上 去 编排 有 序 ,整齐 美观 。 

要 在 网 页 中 添加 文本 、 图 像 等 各 种 网 页 元 素 ,只 要 在 HTML 代码 中 插入 对 应 的 
HTML 标记 并 设置 属性 和 内 容 即 可 。 


2.2.1 创建 文本 和 列表 


在 网 页 中 添加 文本 主要 有 以 下 几 种 方法 。 
1. 直接 写 文本 


网 页 中 的 文本 可 直接 放 在 任何 标记 中 。 例 如 ,一 body> 文 本 二 /body 二 到 div 二 文本 
去 /divy 之 .二 td> 文 本 过 /td> ,但 这 种 方法 没有 标明 文本 的 语义 ,不 推荐 使 用 。 


2. 用 段落 标记 一 p 二 格式 化 文本 
各 段落 文本 将 换行 显示 ,段落 与 段落 之 间 有 大 约 一 行 的 间距 。 例 如 : 
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<p> 第 一 段 < /p><p> 第 二 段 < /p><p> 第 三 段 < /p> 


3. 用 标题 标记 二 hn 格式 化 文本 


标题 标记 是 具有 语义 的 标记 , 它 指 明 标记 内 的 内 容 是 一 个 标题 。 标 题 标 记 共有 6 种 ， 
用 来 定义 第 nn 级 标题 (n 二 1,2,3,…,6),n 的 值 越 大 , 字 越 小 ,所 以 二 hl 二 是 最 大 的 标题 标 
记 , 而 过 h6 过 是 最 小 的 标题 标记 。 标 题 标记 中 的 文本 将 以 粗 体 显 示 ,实际 上 可 看 成 是 特 
殊 的 段落 标记 。 

标题 标记 和 段落 标记 均 具 有 对 齐 属性 align, 用 来 设置 元 素 的 内 容 在 元 素 占据 的 一 行 
空间 内 的 对 齐 方式 。 取 值 有 left( 左 对 齐 ) right( 右 对 齐 ) center( 居 中 对 齐 ) 。 


4. 文本 换行 标记 二 br 二 和 二 wbr> 


去 br> 是 强制 换行 标记 ,如 果 和 希望 文本 在 浏览 器 中 换行 ,可 在 要 换行 处 插入 二 br> 标 
记 , 或 在 DW 中 按 Shift 十 Enter 键 。 换 行 标记 二 br 二 不 会 产生 一 行 的 空 阶 。 

二 wbr 二 是 软 换行 标记 , 即 当 浏览 器 窗口 或 父 级 元 素 足够 宽 时 不 换行 ,而 宽度 不 够 时 
在 此 处 自动 换行 。 这 在 可 变 宽 度 布局 的 网 页 中 是 有 用 的 。 

5. 列表 标记 


为 了 合理 地 组 织 文本 或 其 他 元 素 , 网 页 中 经 常 要 用 到 列表 。 列 表 标记 有 3 种 : 无 序 
列表 二 ul 盖 有 序列 表 二 ol 二 和 定义 列表 一 dl。 每 个 列表 标记 都 是 配对 标记 ,在 二 二 
和 二 ol 二 标记 中 可 包含 若干 个 二 li 瑟 标记 ,表示 列表 项 。 在 二 dl 二 标记 中 通常 包括 一 个 
二 dt 二 标记 (表示 列表 标题 ) 和 若干 个 二 dd 二 标记 (表示 列表 项 ) 。 

图 2-6 是 一 个 包含 了 各 种 文本 和 列表 的 网 页 , 它 的 HTML 代码 (2-2. html) 如 下 。 


ET ORT 


文件 中 ”编辑 时) 查看 W) 收藏 和 ) 工 }” 
恶 让 加 | http://1ocahost/2-1 hnl 国 | 四 到 


网 页 制作 语言 








Web 开 发 领域 常用 的 网 页 制作 语言 如 下 ， 


。HTIL， 网 页 结构 语言 
。CSS， 网 页 表现 语言 
。JavaScript 


一 种 浏览 器 编程 语言 
。 PHP 





2-6 包含 各 种 文本 标记 的 网 页 


<html><body> 
<h2 align= "center"> 网 页 制作 语言 < /h2> 
<p>Web 开发 领域 常用 的 网 页 制作 语言 如 下 :< /p> 
<ul> 
<1i>HTML: 网 页 结构 语言 </1i> 














HTML 


<1i>Css: 网 页 表现 语言 </1i> 
<1i>JavaScript<br> 一 种 浏览 器 编程 语言 </1i> 
<1i>PHP</1i> 
</ul> 
</body>< /html> 


2.2.2 插入 图 像 


网 页 中 图 像 对 浏览 者 的 吸引 力 远 大 于 文本 ,选择 最 恰当 的 图 像 ,能够 牢 牢 吸引 浏览 者 
的 视线 。 图 像 直 接 表 现 主 题 , 并 且 凭借 图 像 的 意境 ,使 浏览 者 产生 共鸣 。 缺 少 图 像 而 只 有 
色彩 和 文字 的 设计 ,给 人 的 印象 是 没有 主题 的 空虚 的 画面 ,浏览 者 将 很 难 理解 该 网 页 的 主 
要 内 容 。 


1. 使 用 一 img 二 标记 插入 图 像 文件 


在 HTML 中 ,用 一 img 之 标记 可 以 插入 图 像 文件 ,并 可 设置 图 像 的 大 小 对齐 等 属 
性 , 它 是 一 个 单 标记 ,如 图 2-7 所 示 的 网 页 中 插入 了 一 张 图 片 , 它 的 HTML 代码 (2-3 
.html) 如 下 。 


<html><body> 

<p> 今 天 钓 到 一 条 大 鱼 , 好 高 兴 !< /p> 

<img src="images/dayu.jpg" width="200" height="132" align="center" title=" 好 大 的 
鱼 "/> 

</body></html> 








图 2-7 在 网 页 中 插入 图 片 


该 网 页 中 显示 的 图 片 文件 位 于 当前 文件 所 在 目录 下 的 images 目录 中 ,文件 名 为 
dayu.jpg, 如 果 不 存 在 该 文件 , 则 会 显示 一 片 空白 。 志 img 之 标记 的 常见 属性 如 表 2-3 
所 示 。 
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表 2-3 一 img> 标 记 的 常见 属性 











属 性 含 区 
Src 图 片 文件 的 URL 地 址 
alt 当 图 片 无 法 显示 时 显示 的 替代 文字 
title 鼠标 停留 在 图 片上 时 显示 的 说 明文 字 
align 图 片 的 对 齐 方式 ,共有 9 种 取 值 
width height 图 片 在 网 页 中 的 宽 和 高 ,单位 为 像素 或 百分比 





在 DW 中 , 单 击 工具 栏 中 的 图 像 按钮 (图 可 让 用 户 选 择 插入 一 张 图 片 , 其 实质 是 
DW 在 代码 中 自动 插入 了 一 个 过 img> 标 记 , 选 中 插入 的 图 像 ,还 可 在 属性 面板 中 设 署 图 
像 的 各 种 属性 以 及 图 像 的 链接 地 址 等 。 

除了 使 用 <img 二 标记 插入 图 像 外 ,还 可 将 图 像 作为 HTML 元 素 的 背景 戏 入 到 网 页 
中 ,由 于 CSS 的 背景 属性 功能 强大 ,现在 更 推荐 将 元 素 的 装饰 性 图 像 作为 背景 嵌入 。 如 
果 图 像 是 通过 img 二 元 素 插入 的 , 则 可 以 在 浏览 器 上 通过 按 住 鼠 标 左 键 拖 动 选中 图 片 ， 
此 时 图 片 呈现 反选 状态 ,还 可 以 将 它 拖 动 到 地 址 栏 里 ,那么 浏览 器 将 单独 打开 这 张 图 片 。 
如 果 是 作为 背景 嵌入 , 则 无 法 选中 图 片 。 


2. 网 页 中 支持 的 图 像 文 件 格式 


网 页 中 可 以 插入 的 图 像 文件 格式 有 JPG 、GIF 和 PNG 格式 ,它们 都 是 压缩 形式 的 图 
像 格式 ,体积 较 位 图 格式 (BMP) 的 图 像 小 ,适合 于 网 络 传输 。 这 3 种 格式 图 像 文件 的 特 
点 如 表 2-4 所 示 。 
表 2-4 网 页 中 3 种 图 像 格式 的 比较 





图 像 格式 JPG GIF PNG 
压缩 形式 有 损 压 缩 无 损 压 缩 无 损 压 缩 
支持 的 颜色 数 |24 位 真 彩色 256 色 真 彩色 或 256 色 
支持 透明 不 支持 支持 全 透明 支持 半 透 明和 全 透明 
支持 动画 不 支持 支持 不 支持 


适用 场合 照片 等 颜色 丰富 的 图 片 | 卡通 图 形 ` 线 条、 图 标 等 颜色 数 少 的 图 片 | 都 可 以 





2.3 利用 DW 代码 视图 提高 效率 


DW 提供 了 方便 的 代码 编写 功能 。 前 面 曾 谈 到 ,页 面 在 浏览 器 中 的 最 终 显示 效果 完 
全 由 HTML 代码 决定 ,DW 只 是 辅助 用 户 自动 地 插入 或 者 生成 必要 的 代码 。 在 实际 中 ， 
还 是 会 经 常 遇 到 通过 可 视 化 的 方式 生成 的 代码 并 不 能 满足 需要 的 情况 ,这 时 就 需要 设计 
师 对 代码 进行 手工 调整 ,这 个 工作 可 以 在 DW 的 代码 视图 中 完成 。 在 代码 视图 中 ,DW 
提供 了 很 多 方便 的 功能 ,可 以 帮助 用 户 更 高 效 地 完成 代码 的 输入 和 编辑 操作 。 

















2.3.1 代码 提示 


在 HTML 和 CSS 语言 中 ,都 有 很 多 标记 、 属 性 和 属性 值 , 设 计 者 要 把 众多 的 标记 、 属 
性 和 属性 值 记 清 楚 是 很 不 容易 的 。 为 此 ,DW 提供 了 方便 的 代码 提示 功能 ,以 减少 设计 者 
的 记忆 量 ,并 加 快 代码 的 输入 速度 。 

在 DW 的 代码 视图 中 ,如 果 和 希望 在 代码 中 的 某 个 位 置 增加 一 个 HTML 标记 ,只 需 把 
光标 移动 到 目标 位 置 ,输入 “二 ”, 就 会 弹出 标记 提示 框 ,如 图 2-8 所 示 。 这 时 可 以 按 “y” 
键 选取 所 需 的 标记 ,再 按 回 车 键 即 完成 对 该 标记 的 输入 ,有 效 地 避免 了 拼写 错误 。 

如 果 要 为 标记 添加 一 个 属性 ,只 需 在 标记 名 或 其 属性 后 按 下 空格 键 ,就 会 出 现下 拉 
框 , 列 出 了 该 标记 具有 的 所 有 属性 和 事件 ,如 图 2-9 所 示 , 按 “y" 键 就 可 选取 所 需 的 属性 。 
实际 上 ,通过 查看 列 出 的 所 有 属性 ,还 可 以 帮助 我 们 学 习 该 标记 具有 哪些 属性 。 

















3 
革 
El 
的 2 
| 
加 : 
2 


图 2-8 输入 “<” 后 弹出 标记 提示 图 2-9 输入 空格 后 弹出 属性 提示 


如 果 列 出 的 属性 特别 多 ,那么 可 以 继续 输入 所 需 属 性 的 第 一 个 字母 ,这 时 属性 提示 框 
中 的 内 容 会 发 生变 化 , 仅 列 出 以 这 个 字母 开头 的 属性 ,就 大 大 缩小 了 选择 范围 。 

在 选择 了 某 个 属性 后 , 按 回 车 键 ,DW 的 代码 提 
示 功 能 就 会 自动 输入 (二 "") ,并 会 弹出 备 选 的 属性 
值 ,如 图 2-10 所 示 。 这 时 按 “y ” 键 就 可 选取 属性 
值 ,再 按 回 车 键 即 完成 了 属性 值 的 输入 。 如 果 要 修 
改 属性 值 ,只 需 把 属性 值 连 同 引 号 一 起 删 掉 , 然 后 再 - 一 一 一 一 一 一 
输入 一 个 双 引 号 ,就 会 再 次 弹出 属性 值 提示 框 了 。 ” 图 2-10 选中 属性 后 弹出 属性 值 提示 
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#CCCCHF 











2.3.2 代码 快速 定位 


当 页 面 很 复杂 、 代 码 很 长 时 ,如 果 想 快速 找到 某 个 网 页 元 素 对 应 的 代码 ,也 是 很 容易 
的 。 只 需 在 设计 视图 中 单 击 某 个 网 页 元 素 ,那么 切换 到 代码 视图 后 ,光标 也 会 自动 定位 到 
这 个 元 素 对 应 的 代码 处 。 

如 果 要 选中 某 个 元 素 的 整个 代码 ,可 以 使 用 图 2-11 中 的 “标记 按钮 ?功能 , 单 击 标记 
按钮 ,就 会 把 该 元 素 对 应 的 代码 选中 。 而 且 , 从 标记 按钮 中 ,还 能 看 出 元 素 之 间 的 嵌 套 关 
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系 。 例 如 ,把 光标 停留 在 i 元 素 中 的 内 容 时 ,左下 角 的 标记 按钮 依次 为 “一 body 之 一 h2 二 
二 i 之”, 表 示 i 元 素 是 嵌 套 在 h2 元 素 中 的 ,而 h2 元 素 又 是 嵌 套 在 body 元 素 中 的 。 用 户 可 
方便 地 单 击 相应 的 标记 按钮 选中 各 个 元 素 对 应 的 代码 范围 及 在 设计 视图 中 的 位 置 。 





图 2-11 使 用 标记 按钮 快速 定位 元 素 


2.3.3 DW 中 的 常用 快捷 键 


表 2-5 列 出 了 DW 的 一 些 常 用 快捷 键 ,实际 上 这 些 快捷 键 是 很 多 软件 通用 的 快捷 键 ， 
在 其 他 很 多 应 用 软件 (如 Word、Fireworks) 中 也 经 常 使 用 。 
表 2-5 Dreamweaver 的 常用 快捷 键 





快 捷 键 功 能 快捷 键 功 能 
Ctrl 十 Z 撤销 操作 Ctrl 十 C 复制 
Ctrl 十 S 保存 文档 Ctrl 十 V 粘贴 
F12 预览 网 页 Ctrl 十 X 剪 切 
Ctrl 十 A 全 选 Ctrl 十 N 新 建文 档 





1 Coatz 


在 制作 网 页 过 程 中 ,为 了 调试 网 页 ,经 常会 把 网 页 修改 得 很 乱 , 此 时 如 果 想 回 退 到 原 
来 的 状态 ,只 需 按 Ctrl 十 Z 键 进行 撤销 操作 ,连续 按 则 能 撤销 多 步 操作 。 需 要 注意 的 是 ， 
即使 将 文档 保存 过 ,但 没有 关闭 文档 ,就 仍然 能 按 Ctrl 十 Z 键 进行 撤销 。 


2. CtnltsS 


由 于 调试 网 页 时 经 常 需要 预览 网 页 ,而 预览 之 前 必须 先 保存 网 页 ,因此 Ctrl 十 S( 保 
存 ) 也 是 用 得 很 频繁 的 快捷 键 ,调试 过 程 通常 是 先 按 Ctrl 十 S 键 再 按 F12 键 预览 。 


提示 : 在 预览 网 页 后 ,建议 不 要 关闭 浏览 器 ,这 样 下 次 修改 并 保存 网 页 后 ,可 以 直接 
按 F5 键 刷新 浏览 器 ,就 能 快速 看 到 修改 后 的 效果 了 。 


3. Ctrl 十 A Ctrl 十 C Ctrl 十 V Ctrl 十 X 


这 几 个 快捷 键 是 文本 编辑 中 最 常用 的 快捷 键 , 在 制作 网 页 过 程 中 经 常 需要 使 用 。 例 

















如 在 网 上 找到 一 个 完整 的 HTML 源 代码 , 想 在 DW 中 调试 ,那么 最 快捷 的 方式 就 是 先 在 
网 上 复制 这 段 代码 ,然后 在 DW 中 按 Ctrl 十 N 键 新 建 网 页 ,切换 到 代码 视图 , 按 Ctrl 十 A 
键 全 选 代码 视图 中 的 代码 , 按 Ctrl 十 V 键 粘贴 就 能 用 网 上 的 代码 替换 掉 DW 中 原来 的 
代码 。 


2.4 创建 超 链接 


超 链接 是 组 成 网 站 的 基本 元 素 , 通 过 超 链接 可 以 将 很 多 网 页 链接 成 一 个 网 站 ,并 将 
Internet 上 的 各 个 网 站 联系 在 一 起 ,浏览 者 可 以 方便 地 从 一 个 网 页 跳 转 到 另 一 个 网 页 。 

超 链接 是 通过 URL( 统 一 资源 定位 器 ) 来 定位 目标 信息 的 。URL 主要 包括 4 部 分 : 
网 络 协议 (如 http://) ,域名 或 IP 地址、 文件 路 径 和 文件 名 。 


2.4.1 超 链接 标记 二 a 二 


在 网 页 中 ,二 a 二 标记 且 带 有 href 属性 时 表示 是 超 链接 ,图 2-12 的 网 页 中 创建 了 两 个 
超 链 接 , 当 鼠标 移动 到 超 链接 上 时 会 变 成 手 形 ,其 代码 (2-4. html) 如 下 。 


<html><body> 

<a href="/index.html" target=" blank"> 网 站 首页 </a> 

<a href="mailto:xia@ qq.com" title=" 欢 迎 给 我 来 信 "> 联 系 我 们 < /a> 
</body></html> 


习 超 链接 标记 示例 SIxl 
文件 中 编辑 了 ) EE Ea 
正二 | 知 ht //localhost -| 





ET EF 


图 2-12 网 页 中 的 超 链接 





去 a> 标 记 的 属性 及 其 取 值 如 表 2-6 所 示 。 
表 2-6 二 a> 标 记 的 属性 及 其 取 值 


属性 名 说 明 属 性 值 
href 超 链 接 的 URL 路 径 | 相对 路 径 或 绝对 路 径 、E-mail、# 锚 点 名 


_blank: 在 新 窗口 打开 

_self: 在 当前 窗口 打开 ,默认 值 

target 超 链接 的 打开 方式 _parent: 在 当前 窗口 的 父 窗 口 打开 

_top: 在 整个 浏览 器 窗口 打开 链接 
窗口 或 框架 名 : 在 指定 名 称 的 窗口 或 框架 中 打开 


title 超 链接 上 的 提示 文字 | 属性 值 是 任何 字符 串 


; 自 定义 的 名 称 ,如 id 二 "chl1"。 二 a 二 标记 作为 锚 点 使 用 时 ,不 能 
id .name 锚 点 的 id 或 名 称 设置 href 属性 
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超 链 接 的 源 对 象 是 指 可 以 设置 链接 的 网 页 对 象 ,主要 有 文本 、 图 像 或 文本 图 像 的 混合 
体 ,它们 对 应 二 a 二 标记 的 内 容 , 另 外 还 有 热 区 链接 。 在 DW 中 ,这 些 网 页 对 象 的 属性 面 
板 中 都 有 “链接 ”设置 项 ,可 以 很 方便 地 为 它们 建立 超 链 接 。 


1. 用 文本 作 超 链接 


在 DW 中 ,可 以 先 输入 文本 ,然后 用 鼠标 选中 文本 ,在 属性 面板 的 “链接 ” 框 中 输入 链 
接 的 地 址 并 按 回 车 键 ;也 可 以 单 击 “ 常 用 ”工具 栏 中 的 “超级 链接 ”图 标 ,在 对 话 框 中 输入 
“文本 ”和 链接 地 址 ;还 可 以 在 代码 视图 中 直接 写 代码 。 无 论 使 用 何 种 方式 ,生成 的 超 链 接 
代码 类 似 于 下 面 这 种 形式 : 


<a href= "index.htm" target=" blank"> 首 页 </a> 


2. 用 图 像 作 超 链接 


首先 需要 插 和 人 一 张 图 片 ,然后 选中 图 片 ,在 属性 面板 的 “链接 ”文本 框 中 设置 图 像 链接 
的 地 址 。 生 成 的 代码 如 下 : 


<a href="index.htm"><img src="images/info.gif" title=" 返 回首 页 " border="0" /> 
</a> 


用 图 像 作 超 链 接 ,最 好 设置 一 img 盖 标记 的 border 属性 等 于 0 ,否则 在 IE8 中 ,图 像 周 
围 会 出 现 一 个 蓝 色 的 2 像素 粗 的 边框 ,很 不 美观 。 


3. 热 区 链接 


用 图 像 作 超 链接 只 能 让 整 张 图 片 指向 一 个 链接 ,那么 能 否 在 一 张 图 片上 创建 多 个 超 
链接 呢 ? 这 时 就 需要 热 区 链接 。 所 谓 热 区 链接 ,就 是 在 图 片上 划 出 若干 个 区 域 , 让 每 个 区 
域 分 别 链接 到 不 同 的 网 页 。 比 如 一 张 中 国 地 图 , 单 击 不 同 的 省 份 会 链接 到 不 同 的 网 页 ,就 

制作 热 区 链接 首先 要 插入 一 张 图 片 ,然后 选中 图 片 , 在 展开 的 图 像 * 属 性 ”面板 上 有 
“地 图 ”选项 , 它 的 下 方 有 3 个 小 按钮 ,分 别 是 绘制 矩形 、 圆 形 、 多 边 形 热 区 的 工具 ,如 
图 2-13 所 示 。 可 以 使 用 它们 在 图 像 上 拖 动 绘制 热 区 ,也 可 以 使 用 箭头 按钮 调整 热 区 的 
位 置 。 
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2-13 图像 属性 面板 中 的 地 图 工具 














绘制 了 热 区 后 ,可 看 到 在 HTML 代码 中 增加 了 一 map 二 标记 ,表示 在 图 像 上 定义 了 
一 幅 地 图 。 地 图 就 是 热 区 的 集合 ,每 个 热 区 用 二 area 二 单 标 记 定 义 , 因 此 所 map 二 和 
去 area 盖 是 成 组 出 现 的 标记 对 。 定 义 热 区 后 生成 的 代码 (2-5. html) 如 下 。 


<img src="images/xf.jpg" alt=" 说 明文 字 " border= "0" usemap="#Map" /> 

<map name= "Map" id= "Map"> 
<area shape="rect" coords="51,131,188,183" href="title.htm" alt=" 说 明文 字 " /> 
<area shape="rect" coords="313,129, 450, 180" href="#h3" /> 

</map> 


其 中 ,二 img 二 标记 会 增加 usemap 属性 与 它 上 面 定 义 的 地 图 ( 热 区 ) 建 立 关 联 。 
二 area 二 标记 的 shape 属性 定义 了 热 区 的 形状 ,coords 属性 定义 了 热 区 的 坐标 点 ， 
href 属性 定义 了 热 区 链接 的 文件 ;alt 属性 可 设置 鼠标 移动 到 热 区 上 时 显示 的 提示 文字 。 


2.4.2 绝对 URL 与 相对 URL 


URL 是 统一 资源 定位 器 的 意思 。 在 网 页 中 ,URL 用 来 描述 链接 的 文件 或 引用 的 图 
片 的 地 址 。 网 页 中 的 URL 可 分 为 绝对 URL 和 相对 URL。 


1. 绝对 URL( 绝 对 路 径 ) 


绝对 URL 是 采用 完整 的 URL 来 规定 文件 在 Internet 上 的 精确 地 点 ,包括 完整 的 协 
议 类 型 .计算 机 域名 或 IP 地址、 包含 路 径 信息 的 文档 名 。 书 写 格式 为 “协议 : // 计 算 机 域 
名 或 IP 地 址 [/ 文 档 路 径 ][/ 文 档 名 ]”。 例 如 : 


<a href="http://www.hynu.cn/index.htm"> 学 院 首页 < /a> <!-- 链 接 文件 --> 
<img src=" http://www.hynu.cn/images/bg.jpg" /> <!-- 调 用 图 片 --> 


2. 相对 URL( 相 对 路 径 ) 


相对 URL 是 相对 于 当前 页 的 地 点 来 规定 文件 的 地 点 。 应 尽量 使 用 相对 URL 创建 
链接 ,使 用 相对 路 径 创 建 的 链接 可 根据 目标 文件 与 当前 文件 的 目录 关系 ,分 为 5 种 情况 。 

(1) 链接 到 同一 目录 内 的 其 他 文件 ,直接 写 目标 文件 名 即 可 ; 

(2) 链接 到 下 一 级 目录 中 的 文件 , 则 先 写 “下 一 级 目录 名 /”, 再 写 目 标 文件 名 ; 

(3) 链接 到 上 一 级 目录 中 的 文件 , 则 在 目标 文件 名 前 添加 “../”, 因 为 “..” 表 示 上 级 目 
录 , 而 “. ”表示 本 级 目录 ; 

(4) 链接 到 上 一 级 目录 中 其 他 子 目 录 中 的 网 页 文件 , 则 可 先 用 “../” 退 回 到 上 一 级 目 
录 , 再 进入 目标 文件 所 在 的 目录 ; 

(5) 链接 到 网 站 根 目录 下 的 网 页 文件 ,由 于 “/” 表 示 网 站 根 目录 ,因此 href 的 属性 值 
可 写成 “/file. htm”。 但 是 必须 将 Web 服务 器 的 根 目 录 配置 好 之 后 才能 使 用 这 种 方式 ,而 
制作 静态 网 页 时 一 般 并 没有 安装 Web 服务 器 。 
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下 面 是 前 4 种 情况 对 应 的 实例 。 


<a href= "目标 文件 名 "> 链接 文本 < /a> <!-- 同 一 级 目录 内 链接 --> 
<a href=" 子 目录 名 /目标 文件 名 "> 链接 文本 </a> “<!-- 到 下 一 级 目录 内 的 链接 --> 
<a href="../ 目 标 文件 名 "> 链接 文本 < /a> <!-- 到 上 一 级 目录 内 的 链接 --> 


<a href="../ 子 目录 名 /目标 文件 名 "> 链接 文本 < /a> 


3. 相对 URL 使 用 举例 
下 面 举 个 例子 说 明 相 对 路 径 的 使 用 方法 。 网 站 的 文件 目录 结构 如 图 2-14 所 示 。 


root 


£01 (Gndex.htm) f-02 f-03 


a.htm box.gif 01 02 i 
Cahm ) Cboxsif ) C 


[一 王 -一 
(人 cat.gif ) 人 b.htm DD 攻 cupsif ) 
图 2-14 网 站 的 文件 目录 结构 










































































图 中 的 矩形 表示 文件 夹 , 贺 角 和 矩形 表示 文件 。 

(1) 如 果 f01 目录 下 的 a. htm 需要 显示 同 目录 下 的 box. gif 图 片 ,因为 在 当前 目录 
下 可 以 直接 找到 box. gif 文件 ,所 以 相对 路 径 是 box. gif 或 者 . /box. gif 。 

(2) 如 果 根 目录 下 的 index. htm 需要 显示 f01 目录 下 的 box. gif 图 片 , 则 应 先进 入 二 
01 目录 ,再 找到 box. gif 文件 ,因此 相对 路 径 是 f-01/box. gif。 

(3) 如 果 f03/02 目录 下 的 b. htm 需要 显示 01 目录 下 的 cat. gif 图 片 , 则 应 从 02 目 
录 退 一 级 到 f-03 目录 ,再 进入 01 目录 ,所 以 相对 路 径 是 “../01/cat. gif”。 

(4) 如 果 b. htm 需要 显示 box. gif 图 片 ,应 该 写成 *../ ../{-01/box. gif”。 

(5) 如 果 a. htm 需要 显示 cup. gif 图 片 ,应 该 写成 *../{-03/02/cup. gif”。 

可 见 , 相 对 路 径 比 较 简便 ,无须 输入 完整 的 URL。 另 外 ,相对 路 径 还 有 一 个 很 明显 的 
优点 : 可 以 毫 无 顾 鼠 地 修改 网 站 的 域名 或 网 站 文件 夹 在 服务 器 硬盘 中 的 存放 位 置 。 

提示 : 如 果 在 DW 中 制作 网 页 时 看 到 代码 中 URL 为 file 协议 的 格式 ,例如 ,file:/// 
E/ 网 页 制作 上 课 /DEMO/bg. png, 说 明 网 页 中 引用 的 资源 是 本 机 上 的 ,出 现 这 种 情况 的 
原因 是 引用 的 文件 未 在 网 站 目录 内 .或 根本 未 创建 网 站 目录 ,或 网 页 文件 尚未 保存 到 网 站 
目录 内 。 当 网 页 上 传 到 服务 器 后 ,由 于 该 资源 在 服务 器 上 的 存放 路 径 和 本 机 上 的 路 径 一 
般 不 会 相同 ,就 会 出 现 找 不 到 文件 的 情况 ,因此 应 避免 这 种 情况 出 现 。 


2.4.3 超 链 接 的 种 类 


超 链接 有 很 多 种 类 ,如 网 页 链接 .电子 邮件 链接 、 锚 链接 等 ,它们 的 区 别 在 于 其 href 
属性 的 取 值 不 同 。 因 此 可 以 根据 href 属性 的 取 值 来 划分 超 链 接 的 类 型 。 
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1. 链接 到 其 他 网 页 或 文件 
因为 超 链接 本 身 就 是 为 了 把 Internet 上 各 种 网 页 或 文件 链接 在 一 起 ,所 以 链接 到 文 
件 的 链接 是 最 重要 的 一 类 超 链接 , 它 可 分 为 以 下 几 种 : 

。 内 部 链接 ,链接 地 址 是 相对 URL. 如 : 





<a href="../index.htm"> 首 页 </a> 


。 外 部 链接 ,链接 地 址 是 绝对 URL, 如 : 


<a href="http://www.qq.com"> 腾 讯 网 < /a> 


。 下载 链 接 ,链接 地 址 是 一 个 浏览 器 不 能 打开 的 文件 类 型 ,如 rar、doc、apk 等 , 单 击 
链接 会 弹出 文件 下 载 框 ,例如 : 


<a href="inc/test.rar"> 点 击 下 载 </a> 


2. 电子 邮件 链接 


如 果 在 链接 的 URL 地 址 前 面 有 “mailto:”, 就 表示 是 电子 邮件 链接 ,点 击 电 子 邮 件 链 
接 后 ,浏览 器 会 自动 打开 默认 的 电子 邮件 客户 端 程序 (如 Outlook)。 


<a href="mailto:xiaoli@163.com">xiaoli@163.com </a> 


由 于 我 国 用 户 大 多 不 喜欢 使 用 客户 端 程序 发 送 邮件 ,所 以 也 可 以 不 建立 电子 邮件 链 
接 , 直 接 把 E-mail 地 址 作为 文本 写 在 网 页 上 ,这 样 还 可 以 防止 垃圾 邮件 的 侵扰 。 


3. 锚 链 接 ( 链 接 到 页 面 中 某 一 指定 的 位 置 ) 


当 网 页 内 容 很 长 ,需要 进行 页 内 跳 转 链接 时 ,就 需要 定义 锚 点 和 锚 点 链接 , 锚 点 可 使 
用 name 属性 或 id 属性 定义 。 锚 链接 需要 和 锚 点 配合 使 用 ,点 击 锚 链 接 会 跳 转 到 指定 的 
锚 点 处 。 示 例 代 码 (2-6. html) 如 下 。 


<a id="ch4"></a> <!-- 定 义 锚 点 , 锚 点 名 为 ch4 --> 
<a href= "#ch4"> .. .</a> < !- -链接 到 当前 网 页 的 锚 点 ch4 处 --> 
<a href= "intro.htm#ch4">…</a> <!-- 链 接 到 intro.htm 网 页 的 锚 点 ch4 处 --> 


注意 : 定义 锚 点 时 锚 点 名 前 面 不 要 加 井 号 ,链接 到 锚 点 时 锚 点 名 前 要 加 井 号 。 
4. 空 链 接 和 脚本 链接 
还 有 一 些 有 特殊 用 途 的 链接 ,例如 ,测试 网 页 时 用 的 空 链接 和 脚本 链接 等 。 


<a href= "#">…</a> <!-- 空 链接 ,网 页 会 返回 页 面 顶端 --> 
<a href= "gavaScript:self.close (); "> 关闭 窗口 </a> <!-- 脚 本 链接 --> 
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5. HTMLS 中 新 增 的 超 链接 


HTML5 为 了 增强 手机 网 站 功能 , 超 链接 的 href 属性 有 了 更 多 的 取 值 ,例如 : 
。 拨 打 电 话 号 码 的 链接 


<a href="tel:13335418888">< /a> 
。 发 短信 的 链接 


<a href="sms:18688888888"> 发 短信 < /a> 


2.4.4 超 链接 目标 的 打开 方式 


二 a 二 标记 具有 target 属性 ,用 于 设置 超 链接 目标 的 打开 方式 。 在 属性 面板 的 “目标 ” 
下 拉 列 表 框 中 可 设置 target 的 属性 的 取 值 ,如 图 2-15 所 
示 , 其 常用 的 取 值 有 4 种 。 

(1) _self 一 一 在 原来 的 窗口 或 框架 打开 链接 的 网 页 ， 
这 是 target 属性 的 默认 值 ; 

(2) _blank 一 一 在 一 个 新 窗口 打开 所 链接 的 网 页 ,这 。 图 2.15 “目标 "下 拉 列 表 框 
个 很 有 用 ,可 防止 打开 新 网 页 后 把 原来 的 网 页 覆盖 掉 ， 
例如 ， 





<a href= "http://www.rongshu.comn target= "blank"> 榕 树 下 < /a> 


(3) _parent 一 一 将 链接 的 文件 载 和 到 父 框架 打开 ,如 果 包 含 的 链接 不 是 嵌 套 框架 , 则 
所 链接 的 文档 将 载 入 到 整个 浏览 器 窗口 ; 

(4) _top 一 一 在 整个 浏览 器 窗口 载 人 所 链接 的 文档 ,因而 会 删除 所 有 框架 。 

在 这 4 种 取 值 中 ,”_parent””_top" 仅 仅 在 网 页 被 嵌入 到 其 他 网 页 中 有 效 ,如 框架 中 
的 网 页 ,所 以 它们 用 得 很 少 。 用 得 最 多 的 还 是 通过 *_blank” 属 性 值 使 网 页 在 新 窗口 中 打 
开 , 如 target 王 ”blank" ,要 注意 不 要 漏 写 取 值 名 称 前 的 下 画 线 ””。 


2.4.5 超 链接 制作 的 原则 


1. 可 以 使 用 相对 链接 ,尽量 不 要 使 用 绝对 链接 


相对 链接 的 好 处 在 前 面 已 经 详细 介绍 过 ,原则 上 ,同一 网 站 内 的 文件 之 间 的 链接 都 应 
使 用 相对 链接 方式 .只 有 在 链接 到 其 他 网 站 的 资源 时 才 使 用 绝对 链接 。 例 如 ,和 首页 在 同 
一 级 目录 下 的 其 他 网 页 要 链接 到 首页 ,有 如 下 3 种 方法 。 

(1) a href 二 ". "二 首 页 一 /a> 所 ! 一 链接 到 本 级 目录 , 则 自动 打开 本 级 目录 的 主页 -- 盖 

(2) 二 a href 二 "index. html" 记 首 页 过 /a 二 !- 链 接 到 首页 文件 名 一 二 
































(3) 二 a href 二 "http://www. hynu. cn" 二 首 页 二 /a 二 !-- 链 接 到 网 站 名 一 二 

通常 应 该 尽量 采用 前 两 种 方法 ,而 不 要 采用 第 三 种 方法 。 但 第 一 种 方式 需要 在 Web 
服务 器 上 设置 网 站 的 首页 为 index. html 后 才能 正确 链接 ,这 给 在 文件 夹 中 预览 网 页 带 来 
不 便 。 


2. 链接 目标 尽 可 能 简单 


假如 要 链接 到 其 他 网 站 的 主页 ,那么 有 如 下 两 种 写法 。 

(1) 二 a href 一 "http://www.hynu. cn" 二 首页 一/a> 

(2) 一 a href="http://www. hynu. cn/index. html" 二 首 页 二 /a 放 

则 写法 (1) 比 写法 (2) 要 好 ,因为 第 一 种 写法 不 仅 简单 ,还 可 以 防止 以 后 该 网 站 将 首页 
改名 (如 将 index. html 改 成 index. jsp) 造 成 链接 不 上 的 问题 。 


3. 超 链接 的 综合 运用 实例 
下 面 这 段 代 码 (2-7. html) 包 含 了 各 种 类 型 的 超 链 接 ,请 总 结 这 些 超 链接 的 写法 。 


<html><body> 

<p><a href="dance.html"> 红 舞 鞋 < /a>< /p> 

<p><a href="#xrh"> 雪 绒 花 </a></p> 

<p><a href=mailto:xiali@163.net title=" 欢 迎 给 我 来 信 "><img src="mail.gif" /> </ 


a></p> 

<p> 好 站 推荐 :<a href="http://www.baidu.com" target=" blank"> 百 度 </a>< /p> 
<p><a id="xrh"></a> 雪 绒 花 的 介绍 …… </p> 

<p align="right"><a href="JavaScript:self.close(); "> 关闭 窗口 </a>< /p> 
</body></html> 


2.4.6 DW 中 超 链 接 属性 面板 的 使 用 


DW 中 建立 链接 的 选项 框 如 图 2-16 所 示 ,文字 、 链 接 、 图 像 和 热 区 的 属性 面板 中 都 有 
“链接 ”这 一 项 。 其 中 ,“ 链 接 ” 对 应 标记 的 href 属性 , “目标 ”对 应 target 属性 。 利 用 超 链 
接 属性 面板 可 快速 建立 超 链接 ,首先 选中 要 建立 超 链接 的 文字 或 图 片 ,然后 在 “链接 ”选项 
框 中 输入 要 链接 的 URL 地 址 。 

EE 可 9 本 
上 标 [ 了 
图 2-16 DW 中 的 建立 链接 选项 框 


其 中 在 链接 地 址 栏 输入 URL 有 3 种 方法 : 一 是 直接 在 文本 框 输入 URL; 二 是 单 击 
“文件 夹 ?图标 浏览 找到 要 链接 的 文件 .三 是 按 住 拖 放 定位 图 标 ( 旬 ) 不 放 将 其 拖 动 到 锚 点 
处 或 文件 面板 中 要 链接 的 文件 上 ,如 图 2-17 所 示 。 使 用 以 上 任何 一 种 方式 使 “链接 ”下 拉 
列表 框 中 出 现 了 内 容 后 , “目标 ”下 拉 列 表 框 将 变 为 可 用 ,可 选择 超 链接 的 打开 方式 。 





人 














《HTML5+CSS3 Web 前 端 开 发 》 










[inaex htnl IS 
a | 二 Untitled 





图 2-17 使 用 拖 动 链接 定位 图 标 方式 建立 链接 


2.5 插入 Flash 及 让 和 其 他 网 页 


Flash 是 网 络 上 传输 的 矢量 动画 ,利用 DW 可 以 很 方便 地 在 网 页 中 插入 Flash 文件 ， 
从 而 在 网 页 上 展现 丰富 的 动画 效果 。 


2.5.1 插入 Flash 


1. 使 用 DW 在 网 页 中 插入 Flash 的 两 种 方法 


(1) 执行 菜单 命令 :“ 插 入 ”一 “媒体 ”Flash, 再 在 属性 面板 中 调节 插件 的 宽 和 高 ,在 
代码 视图 中 可 看 到 插入 Flash 元 素 是 通过 同时 插入 二 object 二 标记 和 二 embed 放 标记 实 
现 的 ,以 确保 在 所 有 浏览 器 中 都 获得 应 有 的 效果 。 

(2) 执行 菜单 命令 :“ 插 入 ”一 “媒体 ”一 “插件 ”, 此 方法 在 代码 中 仅 插 入 了 二 embed 二 
标记 。 如 果 不 需 要 设置 特别 的 参数 (如 wmode 二 "transparent") ,那么 在 IE 和 Firefox 也 
能 看 到 效果 ,而 代码 更 简洁 ,所 以 推荐 使 用 这 种 方式 。 


2. 在 图 像 上 放置 透明 Flash 


有 些 Flash 动画 的 背景 是 透明 的 ,在 百度 上 搜索 “透明 Flash” 可 以 找到 很 多 透明 的 
Flash 动画 。 可 以 将 这 种 透明 背景 的 Flash 动画 放 在 一 张 图 片上 ,使 图 片 看 起 来 和 Flash 
融 为 一 体 也 有 动画 效果 了 。 方 法 是 先 将 一 张 需要 放置 透明 Flash 的 图 片 作 为 单元 格 (或 
div 等 其 他 元 素 ) 的 背景 ,然后 在 此 单元 格 内 插入 一 个 透明 Flash 文件 ,这 样 ,这 个 Flash 
文件 就 覆盖 在 了 图 片 的 上 方 。 然 后 调整 此 Flash 插件 的 大 小 与 图 片 大 小 使 其 一 致 。 再 选 
中 该 Flash 插件 , 单 击 属性 面板 中 的 “参数 ”按钮 ,在 如 图 2-18 所 示 的 “参数 ”对 话 框 中 新 
建 一 个 参数 wmode,“ 值 ”设置 为 transparent。 生 成 的 代码 包括 一 个 二 param 二 标记 和 一 
个 在 二 object 二 标记 中 的 wmode 属性 ,其 中 二 param name 王 "wmode”value 一 
"transparent" /二 使 Flash 在 IE 中 透明 ,而 wmode 二 "transparent" 使 Flash 在 Chrome 
中 透明 。 生 成 的 代码 见 配 套 源 代码 中 的 2-8. html。 


+|- <| ~ 


Cw 1 
wmode transparent mW | 
图 2-18 设置 Flash 文件 透明 方式 显示 

















2.5.2 嵌入 式 框 架 标 记 志 iframe 一 


如 果 要 在 网 页 中 间 某 个 矩形 区 域内 显示 其 他 网 页 , 则 可 使 用 嵌入 式 框架 标记 
< 一 iframe> ,通过 一 iframe 之 可 以 很 方便 地 在 一 个 网 页 中 显示 另 一 个 网 页 的 内 容 ,如 
图 2-19 网 页 中 的 天 气 预报 就 是 通过 iframe 调用 了 另 一 个 网 页 的 内 容 。 


) 通过 i frsae 调 用 天 气 预 报国 林 EPEI] 





稀 阳 03 月 23 日 旦 项 一 
设置 >> 

















图 2-19 通过 iframe 调用 天 气 预报 网 页 
下 面 是 嵌入 式 框架 的 属性 举例 : 


<iframe src="url" width="x" height="x" scrolling=" [option]" frameborder="x" 


name="main"></iframe> 


去 iframe 之 标记 中 各 个 属性 的 含义 如 下 。 

(1) src 一 一 文件 的 URL 路 径 ; 

(2) width、height 一 一 iframe 框架 的 宽 和 高 ; 

(3) scrolling 一 一 当 src 指定 的 网 页 在 区 域 中 显示 不 完 时 ,是 否 出 现 滚动 条 选项 ,如 
果 设 置 为 no, 则 不 出 现 滚动 条 ;如 为 auto, 则 自动 出 现 滚 动 条 ;如 为 yes, 则 显示 ; 

(4) frameborder 一 一 iframe 边框 的 宽度 ,为 了 让 框架 与 邻近 内 容 相 融合 ,常设 置 
为 0; 


(5) name 





框架 的 名 字 , 用 来 进行 识别 。 例 如 (2-9. htmD): 


<iframe src="http://www.baidu. com" width="250" height="200" scrolling="auto" 


frameborder="0" name= "main"></iframe> 


嵌入 式 框 架 常用 于 将 其 他 网 页 的 内 容 导 入 到 自己 网 页 的 某 个 区 域 ,如 把 天 气 预 报 网 
站 的 天 气 导 入 到 自己 做 的 网 页 的 某 个 区 域 显 示 。 但 某 些 木马 或 病毒 程序 利用 iframe 的 
这 一 特点 ,通过 修改 网 站 的 网 页 源 代 码 ,在 网 页 尾部 添加 iframe 代码 ,导入 其 他 带 病毒 的 
恶意 网 站 的 网 页 ,并 将 iframe 框架 的 宽 和 高 都 设置 为 0, 使 iframe 框架 看 不 到 。 这 样 用 户 
打开 某 网 站 网 页 的 同时 ,就 不 知 不 觉 打开 了 恶意 网 站 的 网 页 ,从 而 感染 病毒 ,这 就 是 所 谓 
的 iframe 挂 木马 的 原理 。 不 过 可 留意 浏览 器 的 状态 栏 看 打开 网 页 时 是 否 提示 正在 打开 
某 个 可 疑 网 站 的 网 址 而 发 现 网 页 被 挂 木马 。 
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2.6 头 部 标记 ” 


如 前 所 述 , 网 页 由 head 和 body 两 个 部 分 构成 。 在 网 页 的 head 部 分 ,除了 title 标记 
外 ,还 有 其 他 的 几 个 标记 ,这 些 标记 虽然 不 常用 ,但 是 需要 有 一 定 的 了 解 。 


1. 一 meta 二 标记 


meta 是 元 信息 的 意思 , 即 描述 信息 的 信息 。meta 标记 提供 网 页 文档 的 描述 信息 等 。 
如 描述 文档 的 编码 方式 ,文档 的 摘要 或 关键 字 .文档 的 刷新 ,这 些 都 不 会 显示 在 网 页 上 。 

过 meta 标 记 可 分 为 两 类 ,如 果 它 具有 name 属性 , 则 表示 它 的 作用 是 提供 页 面 描述 
信息 ;如 果 它 具有 http-equiv 属性 ,其 作用 就 变 成 回应 给 浏览 器 一 些 有 用 的 信息 ,以 帮助 
正确 和 精确 地 显示 网 页 内 容 。 下 面 是 几 个 例子 。 

(1) 描述 文档 的 编码 方式 ,用 来 防止 网 页 变 成 乱码 ,例如 ,gb2312 表示 简体 中 文 , utf- 
8 表示 国际 通用 码 。 在 DW 的 “修改 ”一 页 面 属 性 ”一 标题 /编码 "中 可 更 改 页 面 编 码 方 
式 。 如 果 页 面 编码 方式 与 二 meta 之 标记 声明 的 编码 不 一 致 ,那么 网 页 将 显示 乱码 。 
HTML5 的 文档 编码 方式 声明 如 下 : 


<meta charset= "gb2312"> 
(2) 描述 摘要 或 关键 字 , 网 页 的 摘要 ,关键 字 是 为 了 让 搜索 引擎 能 对 网 页 内 容 的 主题 
进行 识别 和 分 类 。 例 如 : 


<meta name="Keywords" content= "网 页 设计 ,学 习 " /> <!-- 设 置 关 键 字 --> 
<meta name="Description" content=" 学 习 网 页 设计 的 网 站 " /> <!- -设置 摘要 --> 


(3) 设置 文档 刷新 。 文 档 刷 新 可 设置 网 页 经 过 几 秒 钟 后 自动 刷新 或 转 到 其 他 URL。 
例如 : 


<meta http-equiv= "refresh" content="30"> <!-- 过 30s 后 自动 刷新 --> 
<meta http-equiv= "refresh" content="5;Url=index.htm"> 


<!--5s 后 自动 转 到 index.htm --> 


2. 二 link 二 、 一 style 之 和 一 script 一 标记 


一 link 盖 标记 用 来 链接 外 部 CSS 文件 ,一 style 二 标记 用 来 在 网 页 头 部 嵌入 CSS 代 
码 。 而 二 script 二 标记 用 来 链接 或 苦 入 JavaScript 代码 。 例 如 (2-10. html) : 





<link href="css/style.css" rel="stylesheet" /> <!-- 链 接 一 个 css 文件 --> 
<style>hl{font- size:12px;}</style> <!-- 和 嵌入 css 代码 --> 
<script src="js/jquery.js"></script> < !-- 链 接 一 个 外 部 js 文件 --> 
<script>function msg() {alert ("Hello")}</script> <!-- 柚 人 uavascript 代码 --> 














习 题 

1. HTML 中 最 大 的 标题 元 素 是 ( hs 

A. =head> B. =title> C. <hl> D. <=hé> 
2. 二 title 过 标记 中 应 该 放 在 ( ) 标 记 中 。 

A. =head> B. =table> C. =body> D. =div> 
3. align 属性 的 可 取 值 不 包括 以 下 哪 一 项 ? ( ) 

A. left B. center C. middle D. right 
4. 下 述 ( ) 表 示 表 图 像 元 素 。 

A. <img>image. gi{</img> B. 二 img href= "image. gif " /> 

C. <img src 一 “image. gif " /> D. 所 image src= "image. gif " /> 
5. 要 在 新 窗口 打开 一 个 链接 指向 的 网 页 需 用 到 ( 济 

A. href="_blank " B. name= "_blank " 

C. target="_blank " D. href="#blank " 
6. 要 链接 到 当前 目录 上 一 级 目录 中 的 文件 ,href 的 属性 值 应 写成 ( 着 

A. ../ 文 件 名 B. . /文件 名 Gy 文件 名 D. /文件 名 
7. 相对 URL 不 能 用 来 链接 ( jw 

A. 同一 目录 下 的 文件 B. 同一 网 站 下 的 文件 

C. 上 级 目录 中 的 文件 D. 其 他 网 站 中 的 文件 
8. 要 定义 一 个 锚 点 ,应 对 a 标记 设置 属性 。 
9. 如 果 要 在 一 张 图 片上 添加 多 个 超 链 接 ,应 使 用 。 


10. 无 序列 表 标记 是 ,列表 项 标记 是 。 
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第 3 章 ， HTMLS 与 Web 标准 

HTML5 是 HTML 语言 的 最 新 版 本 ,其 前 身 是 由 网 页 超 文 本 应 用 技术 工作 小 组 
WHATWG(CWeb Hypertext Application Technology Working Group) 于 2004 年 提出 的 
Web Applications 1. 0。 在 2007 年 被 W3C 接纳 ,并 成 立 了 新 的 HTML 工作 团队 。 
HTML5 的 正式 版 本 于 2010 年 9 向 公众 推荐 。 
3.1 _ HTMLS 的 改进 
HTML5 已 经 被 IE9 十 .Chrome、Firefox .Safari 等 浏览 器 支持 ,对 于 不 支持 HTML5 
的 旧版 浏览 器 ,HTML5 也 能 让 这 些 浏览 器 安全 地 忽略 掉 HTML5 代码 。 
3.1.1 HTMLS 新 增 的 标记 

与 HTML4.01 相 比 ,HTML5 提供 了 一 些 新 的 标记 和 属性 ,这 些 新 增 的 标记 主要 可 
分 为 : 

(1) 文档 结构 标记 ,例如 二 nav 二 (网 站 导航 条 区 域 ) 和 一 footer 二 (网 站 底部 区 域 ) 等 。 
这 些 标记 将 有 利于 搜索 引擎 的 索引 整理 ,同时 更 好 地 帮助 小 屏幕 装置 和 视 障 人 士 使 用 。 

(2) 媒体 元 素 标记 ,如 一 audio 之 和 二 video 二 标记 。 

(3) 新 的 表单 标记 等 。 具 体 如 表 3-1 所 示 。 
































表 3-1 HTMLS 新 增 的 标记 

标 记 名 格 式 用 法 
<video> <video> …</video> 插入 视频 
<audio> <audio> … </audio> 插入 音频 
<canvas> 过 canvas id 一 "" width 二 "" … 之 … <</canvas> | 画布 标记 ,用 来 绘制 图 形 
<command> | <command type=""> …</command> 定义 命令 按钮 
datalist> <datalist id=" ">……</datalist> 定义 输入 框 的 附带 下 拉 列 表 
<meter> meter >*…</meter> 定义 数值 条 
<progress> <progress>*…</progress> 定义 进度 条 
<time> <time datetime=""></time> 定义 机 器 可 读 的 日 期 或 时 间 
summary> summary>*…</summary> 定义 元 素 的 摘要 
<details> <details>…</details> et ge 本 
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续 表 
标 记 名 格 式 用 法 
<figure> <figure>*…< /figure> Ss 容 ( 图 像 . 图 
<figcaption> | <figcaption>……</figcaption> 定义 figure 元 素 的 标题 
<mark> 二 mark 之 突出 的 文本 </mark> 给 文本 加 背景 色 以 突出 显示 
<ruby> 一 ruby>ruby 注释 一 rt 解释 一 /rt 一 /ruby> | 定义 ruby 语言 的 注释 











下 面 是 几 个 HTML5 标记 的 使 用 示例 。 

1. 一 meter 二 与 一 progress 二 标记 

二 meter 记 与 二 progress 二 属于 状态 交互 元 素 , 其 示例 代码 (3-1. html) 如 下 ,运行 效果 
如 图 3-1 所 示 。 其 中 ,value 属性 用 于 设置 元 素 展示 的 实际 值 , 默 认为 0;min 和 max 用 于 


设置 元 素 展示 的 最 小 值 和 最 大 值 ,low 和 high 用 于 设置 元 素 展 示 的 最 低 值 和 最 高 值 。 其 
范围 应 该 在 min 和 max 值 的 范围 以 内 。 





<P> 速 度 :<meter value= "120" min= "0" max= "220" low="0" high="160"> 
120< /meter> km< /p> 
<p> 剩 余 油 量 :<progress value="30" max="100">30/100< /progress></p> 


速度 ， 宙 | km 
利 余 油 量 ， 国 有 加 
图 3-1 二 meter 记 与 二 progress 二 标记 示例 


2. 二 details 二 与 二 summary 二 标记 


所 details 过 元素 初始 时 只 会 显示 其 中 二 summary 过 元素 的 内 容 , 当 用 户 单 击 
summary 元 素 时 ,会 展开 显示 所 details 之 元 素 的 所 有 内 容 。 示 例 代 码 (3-2. html) 如 下 , 单 
击 summary 元 素 后 的 运行 效果 如 图 3-2 所 示 。 


<details> 
<summary> 衡 阳 师 范 学 院 < /summary> 
<p> 湖 南 省 直属 的 一 所 普通 全 日 制 公办 本 科 院 校 < /p> 
</details> 





区 全 阳 师范 学 院 ] 
湖南 省 直属 的 一 所 普通 全 日 制 公办 本 科 院 以 








图 3-2 ”到 details> 与 summary 之 标记 示例 


提示 : 在 HTML5 中 ,已 经 取消 了 一 些 过 时 的 HTML4 标记 。 这 主要 包括 : 四 字体 
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标记 ,如 二 font 二 一 b> 二 center 二 二 marquee 二 等 ,它们 已 经 被 CSS 取代 ; @Java 小 
程序 赃 入 标记 所 applet>; @@ 框 架 标 记 所 frameset 之 二 frame> 等 。 


3.1.2 HTMLS 语法 的 改进 


1. 文档 类 型 声明 的 改进 


HTML4. 01 中 的 文档 类 型 声明 DOCTYPE 需要 对 DTD 进行 引用 ,因为 HTML4.01 基 
于 SGML。 而 HTML5 不 是 基于 SGML, 不 需要 对 DTD 进行 引用 ,但 还 是 需要 用 
doctype 来 规范 浏览 器 的 行为 ,以 便 让 浏览 器 按照 它们 应 有 的 方式 来 运行 。 在 任何 
HTML 文档 中 规定 doctype 都 是 非常 重要 的 ,这 样 浏览 器 才能 了 解 预期 的 文档 类 型 。 

在 HTML5 中 声明 文档 类 型 (DOCTYPE) 的 代码 如 下 : 


< IDOCTYPE html> 

可 见 它 比 HTML4.01 中 的 文档 类 型 声明 简单 得 多 ,因为 在 HTML4 中 有 3 种 不 同 
的 文档 类 型 (过 渡 型 .严格 型 和 框架 型 ), 而 HTML5 中 只 有 1 种 。 

2. 指定 字符 编码 

HTML5 仍然 使 用 meta 属性 指定 文档 的 字符 编码 ,但 代码 已 经 简化 如 下 : 


<meta charset="utf- 8"> 


3. 属性 书写 的 简化 


HTML5 对 标记 和 属性 的 写法 又 回归 到 了 简化 的 风格 ,这 包括 : 属性 如 果 只 有 唯一 
值 (如 checked), 则 可 省 略 属性 值 ;属性 值 两 边 的 引号 也 可 省 略 。 下 面 的 写法 都 是 正 
确 的 : 


<input type= "text" name="pwd" required> 
<img src=foo alt=bar> 
<p class=foo>Hello world< /p> 


4. 超 链 接 可 以 包含 块 级 元 素 


在 过 去 , 想 给 很 多 块 级 元 素 添加 超 链接 ,只 能 在 每 个 块 级 元 素 内 嵌入 二 a 二 标记 。 在 
HTML5 中 ,只 要 简单 地 把 所 有 内 容 写 在 一 个 链接 元 素 中 就 可 以 了 。 示 例 代码 (3-3 
.html) 如 下 : 


<a href="#"> 
<h2> 标 题 文 本 < /h2> 
<P> 段 落 文本 < /p> 


</a> 
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5. 支持 自 定义 属性 data- * 

HTML5 中 添加 了 自 定义 属性 data-* ,用 于 保存 自 定 义 的 数据 ,同时 还 添加 了 获取 
自 定义 属性 的 API: dataset。 如 下 展示 了 设置 自 定义 属性 和 使 用 JavaScript 获取 属 
性 值 。 

















<div id="content" data-edit=" 张 三 ">…</div> <!-- 设 置 自 定义 属性 data-edit--> 


<script> 
Var content=document .getElementById ("content"); // 获 取 content 元 素 
alert (content .dataset['edit']); // 获 取 data-edit 属性 中 的 数据 
</script> 


3.1.3 HTMLS 的 视 音频 功能 


在 HTML4 中 ,二 embed 这 和 二 object 二 标记 虽然 可 以 插入 视频 ,但 支持 的 视频 格式 
非常 有 限 ,这 已 不 能 满足 网 络 上 播放 各 种 视频 文件 的 需要 了 。 为 此 , HTML5 新 增 了 
去 video> 标 记 用 来 插入 视频 文件 ,二 audio> 标 记 用 于 搬入 音频 文件 。 

1. 二 video 二 标记 

二 video 二 标记 插入 视频 的 示例 代码 (3-4. html) 如 下 ,运行 效果 如 图 3-3 所 示 。 

<video src="sintel .mp4" width="480" height="270" controls preload> 


你 的 浏览 器 不 支持 video 标记 


</video> 





图 3-3 到 video> 标 记 插 入 视频 效果 


二 video 二 标记 具有 如 下 一 些 属性 : 
设置 是 否 显 示 控 制 条 。 如 果 不 写 controls, 则 没有 控制 条 ; 





。 controls 
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。 preload 一 一 如 果 有 该 属性 , 则 媒体 文件 会 在 页 面 加 载 时 进行 缓冲 ,建议 写 该 属性 ， 
。 autoplay 一 一 打开 网 页 时 是 否 自动 播放 ,如 果 写 该 属性 , 则 preload 会 不 起 作用 ; 

















loop 一 一 是 否 循环 播放 ; 
指定 视频 文件 的 路 径 和 文件 名 ; 
poster 为 视频 指定 一 张 片头 图 片 ,会 在 视频 播放 前 拉 伸 到 视频 大 小 显示 ; 

。 width、height 一 一 设置 视频 的 显示 大 小 ,如 果 不 写 , 则 是 视频 的 默认 大 小 。 

去 video> 与 二 /video> 之 间 的 内 容 用 于 在 不 支持 该 标记 的 浏览 器 中 显示 替代 信息 。 

不 同 浏览 器 支持 的 视频 文件 格式 可 能 不 同 ,例如 ,IE9 只 支持 mp4 格式 ,Firefox 支持 
Ogg 和 WebM 格式 ,Chrome 支持 这 3 种 格式 。 

为 此 ,二 video 二 标记 提供 了 设置 多 个 备 选 视频 文件 的 功能 ,此 时 ,应 使 用 二 source 二 
标记 而 非 src 属性 来 设置 视频 文件 的 地 址 。 对 于 不 支持 的 浏览 器 ,只 需要 把 后 备 内 容 放 
在 第 2 个 二 source 二 标记 中 ,允许 使 用 多 个 二 source 二 标记 指定 多 个 后 备 内 容 格 式 。 如 果 
连 志 video 二 标记 都 不 支持 ,还 可 在 其 中 嵌入 志 object 二 或 二 embed 二 标记 。 下 面 是 示例 
代码 (3-5. html) : 





Src 





<video width="480" height="270" poster="piantou.jpg" controls preload> 


<source src="sintel .mp4"> 


<source src="movie.ogv"> <!-- 后 备 视频 格 式 --> 
<object data="acl .wmv"> <!--IE8 会 播放 该 视频 --> 
<a href="sintel .mp4"> download< /a> 
</object> 
</video> 


上 述 代 码 中 ,如 果 浏 览 器 支持 二 video 二 标记 ,也 支持 mp4, 则 会 播放 第 1 个 视频 。 如 
果 浏 览 器 支持 二 video 二 标记 ,也 支持 Ogg, 则 会 播放 第 2 个 视频 。 如 果 浏 览 器 不 支持 
所 video> 标 记 , 则 会 播放 二 object> 标 记 中 的 wmv 视频 。 如 果 浏览 器 都 不 支持 , 则 会 显 
示 下 载 视频 文件 的 链接 。 可 见 , 通 过 二 video 二 标记 ,就 能 为 各 种 浏览 器 提供 支持 的 视频 
格式 了 。 


2. 一 audio 二 标记 


到 audio> 标 记 用 于 插入 音频 ,其 用 法 与 一 video 之 标记 类 似 ,示例 代码 (3-6. html) 
如 下 : 
<audio src="song.ogg" controls preload> 
你 的 浏览 器 不 支持 audio 标记 
</audio> 
去 audio> 标 记 也 提供 了 设置 多 个 备 选 音频 文件 的 功能 ,此 时 ,应 使 用 过 source 二 标 
记 而 非 src 属性 来 设置 音频 文件 的 地 址 。 示 例 代码 (3-7. html) 如 下 : 


<audio controls preload> 
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<source src="song.0gg" type= "audio/ogg"> 
<source src="song-mp3" type="audio/mpeg"> 
你 的 浏览 器 不 支持 audio 标记 


</audio> 


二 audio 二 > 标记 具有 的 属性 和 二 video 记 标记 基本 相同 ,只 是 不 具有 width、height 和 
poster 3 个 属性 。 


3. 插入 flv 格式 视频 


flv(flash video) 格 式 视频 是 目前 使 用 较 广 泛 的 网 络 流 媒 体 视频 格式 ,被 许多 在 线 视 
频 网 站 采用 。 在 网 页 中 插入 flv 视频 可 采用 第 三 方 视频 插件 的 方法 。 

在 百度 上 搜索 swfobject. js 和 mediaplayer. swf 文件 ,将 这 两 个 文件 放 在 网 站 目录 
下 ,并 在 同一 目录 的 网 页 中 插入 如 下 代码 (3-8. html) ,就 能 播放 flv .mp4 等 格式 的 视 
频 了 。 


<div id="container"></div> <!-- 视 频 的 容器 --> 
<script src= "swfobject.js"></script> 
<script> 
Var sl=new SWFObject ("mediaplayer .swf", "mediaplayer", "640", "480","7"); 


sl.addParam("allowfullscreen", "true"); 


sl.addVariable ("width", "640"); // 设 置 视频 的 宽度 
sl.addVariable ("height","480"); 

sl.addVariable ("file", "hnfh.flv"); // 视 频 文件 的 URL 
sl.addVariable ("image", "hnfh.jpg"); // 视 频 播放 时 的 片头 图 像 


sl.write("container");</script> 


使 用 这 种 方法 ,能 够 避免 在 HTML 代码 中 出 现 二 object 王 和 二 embed 二 等 非 标 准 标 
记 , 从 而 更 加 符合 Web 标准 ,也 符合 搜索 引擎 优化 的 原则 。 

在 实际 开发 中 ,网 页 中 播放 视频 还 存在 很 多 技术 难题 。 如 需要 在 服务 器 端 设置 视频 
文件 的 MIME 类 型 等 。 要 对 各 种 不 同 的 视频 文件 自动 进行 兼容 播放 ,兼容 各 种 浏览 器 ， 
这 时 ,可 考虑 在 网 页 中 嵌入 第 三 方 视 频 播放 插件 ,如 * 栈 播 " 等 。 


3.1.4 _ HTMLS 的 绘图 功能 

HTML5 的 二 canvas 二 标记 提供 了 画布 功能 ,二 svg 二 标记 提供 了 绘制 矢量 图 形 的 
功能 。 

1. 一 canvas 二 标记 


二 canvas 之 标记 称 为 画布 标记 ,用 于 在 网 页 上 绘制 图 形 。canvas 本 身 没有 绘制 图 形 
的 能 力 , 所 有 的 绘制 工作 必须 借助 JavaScript 程序 来 完成 。 画 布 是 一 个 矩形 区 域 ,在 画布 
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上 可 绘制 图 形 .文字 填充 颜色 和 插入 图 片 。 过 canvas 之 标记 的 使 用 步骤 如 下 : 


(1) 创建 canvas 元 素 , 并 定义 元 素 的 ID, 设 置 元 素 的 宽度 和 高 度 。 


<canvas id= "myCanvas" width="200" height="100"></canvas> 


(2) 通过 JavaScript 获取 canvas 元 素 , 并 绘制 图 形 ,canvas 的 坐标 起 始点 为 左上 角 。 


下 面 代码 (3-9. html) 的 运行 效果 如 图 3-4 所 示 。 


<script> 

var c=document .getElementById ("myCanvas"); // 获 取 mycanvas 元 素 
Var cxt=c.getContext ("2d"); 

cxt .fillStyle="#ffff00"; // 设 置 填充 颜色 
cxt.fillRect (0,0,150,75); // 绘 制 矩形 

Cxt.moveTo (10,10) 7 // 将 画笔 移动 到 坐标 位 置 
cxt.lineTo (150, 50); // 产 生 线条 
cxt.lineTo(10,50); 

cxt.stroke(); // 绘 制 路 径 

</script> 


ee 


图 3-4 ”canvas 绘制 图 形 


其 中 ,getContext() 方 法 返回 一 个 用 于 在 画布 上 绘图 的 环境 。 该 方法 的 参数 目前 只 


能 是 2D, 它 指定 是 进行 二 维 绘图 (目前 canvas 标记 不 支持 3D 绘图 ) ,该 方法 返回 一 个 环 
境 对 象 ,该 对 象 导 出 一 个 二 维 绘图 的 API。 


去 canvas 二 标记 还 可 以 把 一 个 图 像 文件 放置 到 画布 上 ,示例 代码 (3-10. html) 如 下 : 


<canvas id="myCanvas" width="600" height="500"> 
<script> 

var c=document .getElementById ("myCanvas"); 

Var cxt=c.getContext ("2d"); 


Var img=new Image () 


img.src="images/car.jpg" // 指 定 图 像 文件 的 URL 
cxt.drawImage (img, 10,10,540, 460); // 从 坐标 点 10,10 开始 装载 图 片 
</script> 


其 中 ,drawImage 方法 用 于 在 画布 上 定位 图 像 , 并 规定 图 像 的 宽度 和 高 度 。 
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2. 二 svg 二 标记 














SVG(Scalable Vector Graphics) 是 一 种 使 用 XML 描述 2D 图 形 的 语言 ,用 来 定义 用 
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于 网 页 的 基于 矢量 的 图 形 , 因 此 SVG 图 像 在 放大 时 其 质量 不 会 发 生 改 变 。SVG 基于 
XML, 这 意味 着 SVG DOM 中 的 每 个 元 素 都 是 可 用 的 ,可 以 为 这 些 元 素 附 加 JavaScript 
事件 。 

下 面 是 使 用 SVG 绘制 五 角 星 的 代码 (3-11. html) ,效果 如 图 3-5 所 示 。 


< IDOCTYPE html> 

<html><body> 

<svg xmlns="http://www.w3.0rg/2000/svg" version="1.1" height="190"> 
<polygon points="100,5 40,180 190, 60 10, 60 160,180" 
style="fill:lime;stroke:purple;stroke-width:5;fill- rule:evenodd;" /> 

</svg> <!- -Points 属性 的 值 是 5 个 顶点 的 xy 坐标--> 

</body>< /html> 


图 3-5 SVG 图 形 


SVG 还 支持 矢量 动画 ,其 动画 功能 比 CSS3 动画 功能 更 加 强大 ,比如 能 让 动画 沿 着 
-条 指定 的 路 径 运 动 ,能 通过 其 他 元 素 触发 动画 的 播放 等 ,SVG 动画 的 示例 代码 (3-12 
.html) 如 下 。 


<svg id="svg" width="720" height="200" xmlns="http://www.w3.0rg/2000/svg"> 
<circle id="circle" cx="100" cy="100" r="50"></circle> 
<text font- family="microsoft yahei" font- size="120" y="160" x= "160"> 船 
<animate attributeName= "x" to="360" begin="circle.click" dur="3s" /> 
</text> 
</svg> 


SVG 的 图 形 绘制 功能 能 被 IE9 十 浏览 器 支持 ,但 所 有 IE 浏览 器 (包括 IE11) 都 不 支 
持 SVG 的 动画 功能 ,而 Chrome、Firefox 浏览 器 能 支持 SVG 的 动画 功能 。 

提示 : SVG 和 canvas 的 区 别 : SVG 绘制 的 是 失 量 图 形 , 而 canvas 绘制 的 是 位 图 图 
像 ,SVG 是 行内 元 素 , canvas 是 块 级 元 素 ,SVG 基于 XML 绘制 ,而 canvas 基于 
JavaScript 绘制 。 
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3.2 ”Web 标准 


HTML 语言 最 开始 是 用 来 描述 文档 的 结构 的 ,如 标题 .段落 等 标记 ,后 来 因为 人 们 还 
想 用 它 控制 文档 的 外 观 ,HTML 又 增加 了 一 些 控制 字体 、 对 齐 等 方面 的 标记 和 属性 ,这 样 
做 的 结果 是 HTML 既 能 用 来 描述 文档 的 结构 ,又 能 描述 文档 的 外 观 ,但 是 HTML 描述 
文档 表现 的 能 力 很 弱 , 还 造成 了 结构 代码 和 表现 代码 混杂 在 一 起 ,如 果 页 面 要 改变 外 观 ， 
就 必须 重新 编写 HTML ,代码 重用 性 低 。 





3.2.1 传统 HTML 的 缺点 


在 CSS 还 没有 被 引入 网 页 设计 之 前 ,传统 的 HTML 语言 要 实现 网 页 元 素 外 观 的 设 
计 是 非常 麻烦 的 。 例 如 ,要 在 一 个 网 页 中 把 所 有 过 h2 二 标记 的 文字 ,都 设置 为 “ 蓝 色 、 黑 
体 ” 显 示 , 则 需要 在 每 一 个 二 h2 二 标记 中 添加 二 font 二 标记 ,代码 (3-13. html) 如 下 : 


<h2>< font color="#0000FF" face=" 黑 体 ">h2 标 记 1</font></h2> 
<p>css 标记 的 正文 内 容 1< /p> 
<h2>< font color="#0000FF" face=" 黑 体 ">h2 标 记 2</font></h2> 
<p>css 标记 的 正文 内 容 2< /p> 
<h2>< font color= "#0000FF" face= "黑体 ">h2 标记 3< /font></h2> 
<p>CSSs 标记 的 正文 内 容 3< /p> 
<h2><font color="#0000FF" face=" 黑 体 ">h2 标记 4< /font>< /h2> 
<p>css 标记 的 正文 内 容 4< /p> 






假设 网 页 中 有 100 个 二 h2 二 标记 , 则 需要 重复 添加 100 个 二 font 二 标记 并 设置 属性 ， 
如 果 以 后 要 将 这 100 个 标记 的 颜色 修改 为 红色 ,也 需要 一 个 个 地 改 , 非 常 麻烦 。 
而 使 用 CSS 后 ,情况 则 完全 不 同 , CSS 实现 上 述 功 能 的 代码 (3-14. html) 如 下 。 





<html><head> 

<style> 

h2{ /* 选 中 所 有 h2 标 记 */ 
font- family:" 黑 体 "; 
color:blue; } /* 设置 字体 颜色 x / 

</style> 

</head> 

<body> <h2>h2 标记 1</h2> <!-- 显 示 为 蓝 色 黑 体 --> 
<p>cSss 标记 的 正文 内 容 1< /p> 


<h2>h2 标 记 4< /h2> <!-- 显 示 为 蓝 色 黑 体 --> 
<p>Ccss 标记 的 正文 内 容 4< /p> 
</body></html> 
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可 见 , 用 CSS 可 统一 设置 所 有 h2 元 素 的 样式 ,而 不 必 单 独 为 每 个 元 素 添 加 二 font 二 
标记 。 如 果 要 修改 字体 颜色 ,只 要 修改 上 述 CSS 代码 中 的 color 属性 值 blue, 就 可 以 改变 
页 面 中 所 有 二 h2 过 标记 的 颜色 。 并 且 .CSS 还 能 统一 设置 网 站 中 所 有 页 面 字体 的 风格 。 


3.2.2 ”Web 标准 的 含义 


为 了 让 网 页 的 结构 和 表现 能 够 分 离 ,W3C 提出 了 Web 标准 , 即 网 页 由 结构 、 表 现 和 
行为 组 成 。 用 HTML5 描述 文档 的 结构 ,用 CSS 控制 文档 的 表现 ,因此 HTML 和 CSS 
就 是 内 容 和 形式 的 关系 ,由 HTML 确定 网 页 的 内 容 ,而 通过 CSS 来 决定 页 面 的 表现 
形式 。 

Web 标准 是 指 网 页 由 结构 (Structure) 、 表 现 (Presentation) 和 行为 (Behavior) 组 成 ， 
为 了 理解 Web 标准 ,就 需要 明确 下 面 几 个 概念 。 

(1) 内 容 : 内 容 就 是 页 面 实际 要 传达 的 真正 信息 ,包含 文本 或 者 图 片 等 。 注 意 这 里 
强调 的 “真正 ”, 是 指 纯 粹 的 数据 信息 本 身 。 例 如 : 


天 仙子 (1) 宋 . 张 先 沙 上 并 禽 池上 了 昭 , 云 破 月 来 花 弄 影 。 重 重 帘 幕 密 遮 灯 , 风 不 定 , 人 初 静 ,明日 
落 红 应 满 径 。 作 者 介绍 张 先 (990 一 1078) 字 子 野 , 乌 程 ( 今 浙江 湖州 ) 人 。 天 圣 八 年 (1030) 进士 。 
官 至 尚书 都 官 郎 中 。 与 柳 永 齐名 ,号 称 " 张 三 影 "。 


(2) 结构 : 可 以 看 到 上 面 的 文本 信息 本 身 是 完整 的 ,但 是 混乱 一 团 ,难以 阅读 和 理 
解 , 我 们 必须 给 它 格式 化 一 下 。 把 它 分 成 标题 .作者 、 章 、 节 、 段 落 和 列表 等 。 例 如 : 


标题 天 仙子 (1) 

作者 宋 . 张 先 

正文 

沙 上 并 禽 池上 了 曲 , 云 破 月 来 花 弄 影 。 

重重 帘 幕 密谈 灯 , 风 不 定 , 人 初 静 ， 

明日 落 红 应 满 径 。 

节 1 作者 介绍 

张 先 (990 一 1078) 字 子 野 , 乌 程 ( 今 浙江 湖州 ) 人 。 天 圣 八 年 (1030) 进 士 。 官 至 尚书 都 官 郎中 。 与 
柳 永 齐名 ,号 称 " 张 三 影 "。 


(3) 表现 : 上 面 的 文档 虽然 定义 了 结构 ,但 是 内 容 还 是 原来 的 样式 没有 改变 ,例如 标 
题字 体 没有 变 大 ,正文 的 颜色 也 没有 变化 ,没有 背景 ,没有 修饰 。 所 有 这 些 用 来 改变 内 容 
外 观 的 东西 ,我们 称 之 为 “表现 ”。 下 面 对 它 增加 这 些 修饰 内 容 外 观 的 东西 ,修饰 后 的 效果 
如 图 3-6 所 示 。 

很 明显 ,可 以 看 到 我 们 对 文档 加 了 两 种 背景 ,将 标题 字体 变 大 并 居中 ,将 小 标题 加 粗 
并 变 成 红色 ,等 等 。 所 有 这 些 ,都 是 “表现 ?的 作用 。 它 使 内 容 看 上 去 漂亮 多 了 ! 用 形象 一 
点 的 比喻 : 内 容 是 模特 ,结构 标明 头 和 四 肢 等 各 个 部 位 ,表现 则 是 服装 ,将 模特 打扮 得 漂 
漂亮 亮 。 


(4) 行为 : 就 是 对 内 容 的 交互 及 操作 效果 。 例 如 ,使 用 JavaScript 可 以 响应 鼠标 的 单 
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天 仙子 (1) 


沙 上 并 命 池 上 暇 ， 云 破 月 来 芷 弄 影 . 
重重 帘 落 密 这 灯 ， 风 不 定 ， 人 初 若 ， 
明日 落 红 应 满 径 。 





图 3-6 文档 添加 了 “表现 ”后 的 效果 


击 和 移动 ,可 以 判断 一 些 表 单 提交 ,使 我 们 的 操作 能 够 和 网 页 进行 交互 。 
所 以 说 ,网 页 就 是 由 这 4 层 信息 构成 的 一 个 共同 体 ,这 4 层 的 作用 如 图 3-7 所 示 。 










内 容 如 何 对 事件 作出 响应 
内 容 如 何 显示 


三 


行为 层 








表现 层 












图 3-7 网 页 的 组 成 


在 Web 标准 中 ,结构 标准 语言 是 指 HTML5, 表 现 标 准 语言 是 指 CSS (Cascading 
Style Sheets, 层 县 样式 表 ) ,行为 标准 语言 主要 指 JavaScript。 但 是 实际 上 HTML 也 有 很 
弱 的 描述 表现 的 能 力 , 而 CSS 也 有 一 定 的 响应 行为 的 能 力 ( 如 hover 伪 类 ) ,JavaScript 是 
专门 为 网 页 添加 行为 的 。 所 以 这 3 种 语言 对 应 的 功能 总 体 来 说 如 图 3-8 所 示 , 并 且 这 
3 种 语言 是 相互 关联 密切 配合 的 ,它们 的 关系 如 图 3-9 所 示 。 


HTML5 CSS JavaScript 


结构 表现 行为 


图 3-8 网 页 的 组 成 项 及 实现 它们 的 语言 





图 3-9 三 种 语言 的 相互 联系 














HTML5 与 Web 标准 


3.2.3 ”Web 标准 的 优势 


Web 标准 的 核心 思想 就 是 “结构 "和 “表现 " 相 分 离 , 让 HTML 和 CSS 各 司 其 职 , 这 样 
做 的 好 处 有 以 下 几 点 : 

(1) 由 于 使 用 CSS 代码 统一 设置 元 素 样式 ,可 以 大 量 减少 HTML 代码 的 使 用 ,从 而 
减 小 网 页 文件 的 体积 ,使 页 面 载 人 、 显 示 速 度 更 快 ,并 降低 网 站 流量 费用 ， 

(2) 使 用 CSS 统一 设置 大 量 HTML 元 素 的 样式 后 ,修改 网 页 时 更 有 效率 而 且 代价 
更 低 ; 

(3) 在 Web 标准 中 推荐 使 用 有 语义 的 HTML 元 素 定 义 内 容 , 如 使 用 二 hl> 标记 定 
义 标 题 ,这 样 搜索 引擎 就 能 更 好 地 理解 网 页 中 的 内 容 , 对 搜索 引擎 更 加 友好 ,有 利于 搜索 
引擎 优化 (Search Engine Optimization ,SEO) ,从 而 提高 网 站 在 搜索 引擎 中 的 排名 ， 

(4) 使 网 站 对 浏览 器 更 具 亲 和 力 ,遵循 Web 标准 设计 的 网 页 由 于 具有 良好 的 文档 结 
构 ,使 不 能 有 效 解析 HTML 文档 的 盲人 设备 或 手持 设备 也 能 理解 网 页 代码 内 容 。 

大 体 来 看 ,Web 标准 是 从 2006 年 开始 在 我 国 逐 渐 风 靡 起 来 的 ,在 这 之 前 由 于 IE5. 5 
以 下 版 本 的 浏览 器 对 CSS 的 支持 很 不 好 ,人 们 只 能 更 多 地 使 用 HTML, 想 尽 办 法 使 
HTML 同时 承担 着 “结构 "和 “表现 ”的 双重 任务 。 随 着 IE6 对 CSS 支持 的 显著 改善 , 设 
计 师 开始 重视 CSS ,并 逐渐 遵循 Web 标准 来 设计 网 页 了 。 





3.3 ”HTML 元素 的 概念 


HTML 文档 是 由 各 种 HTML 元 素 组 成 的 ,网 页 中 文字 、 图 像 . 链 接 等 所 有 的 内 容 都 
是 以 元 素 的 形式 定义 在 HTML 代码 中 的 ,因此 元 素 是 构成 HTML 文档 的 基本 部 件 。 元 
素 是 用 标记 来 表现 的 ,一 般 起 始 标记 表示 元 素 的 开始 ,结束 标记 表示 元 素 的 结束 。 把 
HTML 标记 (如 过 p 二 … 近 /p 二 ) 和 标记 之 间 的 内 容 组 合 称 为 元 素 。 

HTML 元 素 可 分 为 “有 内 容 的 元 素 " 和 * 空 元 素 " 两 种 .“ 有 内 容 的 元 素 " 是 由 起 始 标 
记 、 结 束 标记 和 两 者 之 间 的 内 容 组 成 的 ,其 中 元 素 内 容 既 可 以 是 文字 内 容 ,也 可 以 是 其 他 
元 素 。 例 如 在 图 2-4 中 ,起 始 标 记 二 b 二 和 结束 标记 二 /b 二 定义 元 素 的 开始 和 结束 , 它 的 
元 素 内 容 是 文字 “标记 中 的 内 容 ”; 而 起 始 标 记 二 html 记 与 结束 标记 二/html 二 组 成 的 元 
素 , 它 的 元 素 内 容 是 另外 两 个 元 素 : head 元 素 和 body 元 素 。“ 空 元 素 ” 则 只 有 起 始 标 记 
而 没有 结束 标记 和 元 素 内 容 。 例 如 二 br /二 元 素 就 是 空 元 素 ,可 见 “ 空 元 素 ” 对 应 单 
标记 。 

标记 相同 而 标记 中 的 内 容 不 同 应 视 为 不 同 的 元 素 , 同 一 网 页 中 标记 和 标记 的 内 容 都 
相同 的 元 素 如 果 出 现 两 次 也 应 视 为 两 个 不 同 的 元 素 , 因 为 浏览 器 在 解释 HTML 的 每 个 
元 素 时 都 会 为 它 自 动 分 配 一 个 内 部 id, 不 存在 两 个 元 素 的 id 也 相同 的 情况 。 

想 一 想 , 在 如 下 代码 中 ,二 body 之 标记 内 共有 多 少 个 元 素 ? 


<html><body> 
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<a href="box.html"><img src="cup.gif" border="0" align="left" /></a> 
<p> 图 片 的 说 明 内 容 < /p><br> 

<p> 图 片 的 说 明 内 容 < /p> 

</body></html> 


答案 : 5 个。 即 1 个 a 元 素 、1 个 img 元 素 .2 个 p 元 素 和 1 个 br 元 素 。 
3.3.1 行内 元 素 和 块 级 元 素 


HTML 元 素 还 可 以 按 另 一 种 方式 分 为 “行内 元 素 " 和 ”* 块 级 元 素 "。 下 面 是 示例 代码 
(3-15. html) ,其 显示 效果 如 图 3-10 所 示 ,注意 这 些 元 素 在 浏览 器 中 是 如 何 排列 的 。 


<html><body> 
<h2>web 标准 </h2><a href="#">w3c 主页 </a> 
<img src="arrow.gif" width="16" height="16" /><b> 结 构 < /b> 
<font> 表 现 </font><span> 行 为 </span> 
<p> 结 构 标 准 语言 XHTML< /p><ul><1i> 表 现 标准 语言 Css< /1i>< /ul> 
<div> 行 为 标准 语言 Javascript< /div> 
</body></html> 


在 图 3-10 中 ,h2、p、div 这 些 元 素 会 占 满 一 整 行 ,而 a、 【EECEESET 司 
img span 这 些 元 素 在 一 行 中 从 左 到 右 排 列 ,它们 占据 的 宽 。 | 区 RGURSG 志 看 WW | 收 
度 是 刚好 能 容纳 元 素 中 内 容 的 最 小 宽度 。 se 习 


根据 元 素 是 否 会 占据 一 整 行 , HTML 元 素 可 分 为 行 |‖ Web 标准 DIK 
内 元 素 和 块 级 元 素 。 

行内 (inline) 元 素 是 指 元 素 与 元 素 之 间 从 左 到 右 并 排 ||[ 结 构 标准 语言 zm 一 块 级 元 
排列 ,只 有 当 浏 览 器 窗口 容纳 不 下 时 才 会 转 到 下 一 行 。 块 [ss | | 
级 (block) 元 素 是 指 每 个 元 素 占据 浏览 器 一 整 行 位 置 , 块 级 
元 素 与 块 级 元 素 之 间 自 动 换行 ,从 上 到 下 排列 。 块 级 元 素 
内 部 可 包含 行内 元 素 或 块 级 元 素 ,行内 元 素 内 部 可 包含 行 图 3-10 行内 元 素 和 块 级 元 素 
内 元 素 ,但 不 得 包含 块 级 元 素 。 另 外 ,p 元 素 内 部 也 不 能 包 
含 其 他 块 级 元 素 。 

常见 的 块 级 元 素 有 div\ hl 一 h6 .ol、ul\li\dl\td\dd\table\tr\th\td\p\br\form; 常 见 
的 行内 元 素 有 span aimg .em strong \textarea select\option .input。 行 内 元 素 的 大 小 由 
其 内 容 决 定 , 不 可 以 设置 宽 和 高 ,但 img input 元 素 除 外 。 








3.3.2 二 div 之 和 二 span 二 标记 


去 div 之 和 过 span 盖 是 不 含有 语义 的 标记 ,用 来 在 标记 中 放置 任何 网 页 元 素 ( 如 文本 、 
图 像 等 ) 。 就 像 一 个 容器 一 样 , 当 把 内 容 放 入 后 ,内容 的 外 观 不 会 发 生 任何 改变 ,这 样 有 利 
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于 内 容 和 表现 分 离 。 应 用 容器 标记 的 主要 作用 是 通过 引入 CSS 属性 对 容器 内 的 内 容 进 
行 设置 。div 和 span 唯一 的 区 别 是 : div 是 块 级 元 素 ,span 是 行内 元 素 。 下 面 是 一 段 示例 
代码 (3-16. html) ,显示 效果 如 图 3-11 所 示 。 


<html><body> 
<div>div 元 素 1</div> <div>div 元 素 1</div> 
< span> span 元 素 1< /span>< span> span 元 素 2< /span> 
</body></html> 








图 3-11 div 元 素 和 span 元 素 的 区 别 (利用 CSS 为 每 个 元 素 添加 了 背景 和 边框 ) 


可 以 看 出 div 元 素 作为 块 级 元 素 会 占 满 整个 一 行 , 两 个 元 素 间 上 下 排列 ;而 span 元 
素 的 宽度 不 会 自动 伸展 ,以 能 包含 它 的 内 容 的 最 小 宽度 为 准 , 两 个 元 素 之 间 从 左 到 右 依 次 
排列 。 

需要 注意 的 是 ,div 元 素 并 不 对 应 于 * 层 ”的 概念 ,过 去 说 的 层 是 指 通过 CSS 设置 成 了 
绝对 定位 的 div 元 素 , 但 实际 上 也 可 以 对 其 他 任何 元 素 ( 如 二 p 二 ) 设 置 成 绝对 定位 ,此 时 
其 他 元 素 也 成 了 “ 层 ”。 因 此 层 并 不 对 应 于 任何 HTML 标记 ,所 以 Dreamweaver CS3 去 
掉 了 层 这 一 概念 ,将 这 些 设置 成 了 绝对 定位 的 元 素 统称 为 AP(Absolute Position) 元素。 








习 题 

1. 关于 HTML5 ,下列 说 法 错误 的 是 ( )5 

A. HTML5 是 XHTML 的 升级 版 B. HTML5 需要 有 文档 类 型 声明 

C. HTML5 的 属性 值 可 以 不 要 引号 D. HTML5 需要 设置 页 面 编码 类 型 
2. 在 HTML5 中 必须 声明 文档 类 型 ,声明 文档 类 型 需 使 用 的 指令 是 < 
3. Web 标准 主要 由 一 系列 规范 组 成 ,目前 的 Web 标准 主要 由 

三 大 部 分 组 成 。 
4. 写 出 至 少 3 个 HTML5 中 新 增 的 标记 : 和 
5. 在 HTML5 中 ,用 于 播放 视频 文件 的 标记 是 ,要 使 播放 视频 时 有 控制 条 ， 
应 添加 属性 。 

6. 写 出 4 个 常见 的 行内 元 素 : 四 
7. 用 于 在 画布 canvas 上 创建 绘图 环境 的 内 置 函 数 是 


8. 简 述 SVG 和 canvas 的 区 别 。 
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第 4 章 CSS 样式 美化 


CSS(Cascading Styles Sheets, 层 伙 样 式 表 ) 是 用 于 控制 网 页 样式 并 允许 将 样式 信息 
与 网 页 内 容 分 离 的 一 种 标记 性 语言 。HTML 和 CSS 就 是 “内 容 ” 和 “形式 ”的 关系 ,由 
HTML 组 织 网 页 内 容 的 结构 ,而 通过 CSS 来 决定 页 面 的 表现 形式 。CSS 和 HTML 都 是 
由 W3C 负责 组 织 和 制定 的 。 

CSS 的 主要 用 途 包括 两 大 方面 : 

(1) 页 面 元 素 美 化 ,由 于 HTML 的 主要 功能 是 描述 网 页 的 结构 ,所 以 控制 网 页 元 素 
外 观 的 能 力 很 差 , 如 无 法 精确 调整 文字 大 小 ,行距 等 ,而 且 不 能 对 多 个 网 页 元 素 进行 统一 
的 样式 设置 ,只 能 一 个 一 个 元 素 地 设置 。 使 用 CSS 可 实现 对 网 页 的 外 观 进行 更 灵活 丰富 
的 控制 ,使 网 页 更 美观 。 

(2) 页 面 布局 ,利用 CSS 的 盒子 模型 和 相关 属性 可 以 将 网 页 分 栏 分 块 ,从 而 搭建 出 页 
面 的 版 式 。 


4.1 CSS 基础 


CSS 样式 表 由 一 系列 样式 规则 组 成 ,浏览 器 将 这 些 规则 应 用 到 相应 的 元 素 上 ,CSS 
语言 实际 上 是 一 种 描述 HTML 元 素 外 观 ( 样 式 ) 的 语言 。 


4.1.1 CSS 的 语法 
CSS 代码 包含 很 多 条 CSS 样式 规则 。 一 条 CSS 样式 规则 由 选择 器 (selector) 和 声明 


(declarations) 组 成 ,如 图 4-1 所 示 。 


声明 声明 








hl { 
| 


选择 器 属性 值 属性 什 
图 4-1 CSS 样式 规则 的 组 成 (标记 选择 器 ) 























color: red; ee } | 





网 页 一 般 由 很 多 HTML 元 素 组 成 ,CSS 要 将 样式 规则 应 用 到 特定 的 元 素 上 ,就 必须 
先 选中 这 些 元 素 。 选 择 器 是 为 了 选中 网 页 中 特定 元 素 的 ,也 就 是 告诉 浏览 器 ,这 段 CSS 
样式 规则 将 应 用 到 哪 组 (或 哪个 ) 元 素 上 。 

选择 器 用 来 定义 CSS 规则 的 作用 范围 , 它 可 以 是 一 个 标记 名 ,表示 将 网 页 中 所 有 该 
标记 的 元 素 全 部 选中 。 图 4-1 中 的 hl 就 是 一 个 标记 选择 器 , 它 会 将 网 页 中 所 有 二 hl 二 标 


CSS 样式 美化 


记 的 元 素 全 部 选中 ,选择 器 还 可 以 是 “. 类 名 ”或 “#id 名 ”, 它 们 的 作用 范围 如 图 4-2 所 示 。 
<body> i 
《hl class=“xx”> 一 级 标题 《/h1> 一 一 hy 
《h2 class= “xx“ > 二 级 标题 </h2> 上 se 
《p class= “xx“ > 这 是 第 一 段 /p> 类 
《p id=“cc“> 这 是 第 二 段 C/p> -三 ?1 
</body> ef 


图 4-2 选择 器 的 作用 


而 声明 则 用 于 定义 选中 元 素 的 样式 。 介 于 花 括号 {} 之 间 的 所 有 内 容 都 是 声明 ,声明 
又 分 为 属性 (property) 和 值 (value) ,图 4-1 中 为 二 hl 二 标记 的 元 素 定 义 了 两 个 属性 ,其 作 
用 是 使 所 有 hl 元 素 的 文本 变 为 红色 .25px 大 小 。 

属性 是 CSS 样式 控制 的 核心 ,CSS 提供 了 丰富 的 样式 属性 ,如 颜色 .大 小 背景 等 , 绝 
大 多 数 CSS 属性 都 是 公共 属性 ,任何 HTML 元 素 都 可 以 使 用 , 表 4-1 列 出 了 一 些 常 用 的 
CSS 属性 。 


表 4-1 最 常用 的 CSS 属性 





CSS 属性 含义 举 例 
font-size 字体 大 小 font-size: 14px; 
color 字体 颜色 ( 仅 能 设置 字体 的 颜色 ) color: red; 
line-height 行 高 line-height:160% ; 
text-decoration 文本 修饰 (如 增删 下 夯 线 ) text-decoration: none; 
text-indent 文本 缩 进 text-indent:2em; 
background-color 背景 颜色 background-color: # ffeeaa; 





CSS 的 属性 和 值 之 间 用 冒号 隔 开 (注意 CSS 属性 和 值 的 写法 与 HTML 属性 的 区 
别 )。 如 果 要 设置 多 个 属性 ,可 以 书写 多 条 声明 ,每 条 声明 之 间 用 分 号 隔 开 。 

对 于 属性 值 的 书写 ,有 以 下 规则 : 

。 如 果 属 性 的 某 个 值 是 多 个 单词 或 者 是 中 文 , 则 值 要 用 引号 引起 来 ,如 : p {font- 
family: "sans serif"); 

。 如 果 一 个 属性 有 多 个 值 , 则 每 个 值 之 间 要 用 空格 隔 开 ,如 : a {padding: 6px 0 
3px}; 

。 如 果 要 为 某 个 属性 设置 多 个 候选 值 , 则 每 个 值 之 间 用 逗号 隔 开 ,如 : p {font- 


family: "Times New Roman"，Times，serif} 。 
4.1.2 在 HTML 中 引入 CSS 的 方法 
HTML 和 CSS 是 两 种 作用 不 同 的 语言 ,它们 同时 对 一 个 网 页 产生 作用 ,必须 通过 一 


些 方法 ,将 CSS 与 HTML 挂 接 在 一 起 ,才能 正常 工作 。 
在 HTML 中 ,引入 CSS 的 方法 有 行内 式 、. 嵌 人 式 、 链 接 式 和 导入 式 4 种 。 
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1. 行内 式 


所 有 HTML 标记 都 有 一 个 通用 的 属性 style, 行 内 式 就 是 将 无 素 的 CSS 规则 作为 
style 属性 的 属性 值 写 在 元 素 的 标记 内 ,例如 : 


<p style= "color: red; line-height:160%;" width="92%"> 一 段 </p> 


行内 式 引 入 的 优点 是 : 由 于 CSS 规则 就 写 在 标记 内 ,其 作用 对 象 就 是 该 元 素 ,所 以 无 
须 书写 CSS 选择 器 。 当 需要 做 测试 或 对 个 别 元 素 设置 CSS 属性 时 ,可 以 使 用 这 种 方式 ， 
只 需要 书写 属性 和 值 , 但 它 没有 体现 出 CSS 统一 设置 许多 元 素 样 式 的 优势 。 


2. 嵌入 式 


嵌入 式 将 页 面 中 各 种 元 素 的 CSS 样式 设置 集中 写 在 二 style 宝 和 二 /style 二 之 间 ， 
所 style> 标 记 是 专用 于 引入 嵌入 式 CSS 的 一 个 html 标记 , 它 只 能 放置 在 文档 头 部 , 即 
< 到 style 之 … 王 /style 二 只 能 放置 在 文档 的 二 head 和 二 /head 盖 之 间 。 例 如 : 


<head> 
<style> <!--<style> 标 记 用 来 嵌入 css 代码 --> 
hl{ color: red; 
font- size: 25px; } 
</style> 
</head> 


为 单一 的 网 页 设置 样式 ,嵌入 式 很 方便 且 最 常用 ,本 书 接 下 来 的 CSS 代码 一 般 都 采用 这 
种 方式 。 但 是 对 于 一 个 包含 很 多 网 页 的 网 站 来 说 ,如 果 每 个 网 页 都 以 嵌入 式 的 方式 设置 
各 自 的 样式 ,不 仅 麻烦 ,元 余 代码 多 ,而 且 网 站 中 各 个 页 面 的 风格 不 好 统一 。 因 此 ,对 于 一 
个 网 站 来 说 ,通常 都 是 编写 独立 的 CSS 文件 ,使 用 以 下 两 种 方式 之 一 ,引入 到 网 站 的 所 有 
HTML 网 页 文档 中 。 


3. 链接 式 和 导入 式 


当 样 式 需要 应 用 于 很 多 页 面 时 ,外 部 样式 表 ( 外 部 CSS 文件 ) 将 是 理想 的 选择 。 所 谓 
外 部 样式 表 , 就 是 将 CSS 代码 保存 成 一 个 单独 的 文本 文件 ,并 将 文件 的 后 级 名 命名 为 
. css。 链接 式 和 导入 式 的 目的 都 是 为 了 将 外 部 CSS 文件 引入 到 HTML 文件 中 ,其 优点 
是 可 以 让 很 多 网 页 共享 同一 个 CSS 文 件 。 

链接 式 是 在 网 页 头 部 通过 二 link 二 标记 引入 外 部 CSS 文件, 例如 : 


<link href="stylel.css" rel="stylesheet" /> 
而 导入 式 是 通过 CSS 规则 中 的 @import 指令 来 导入 外 部 CSS 文 件 ,例如 : 


<style>@import url ("style2.css"); 
</style> 
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链接 式 和 导 和 人 式 最 大 的 区 别 在 于 链接 式 使 用 HTML 的 标记 引入 外 部 CSS 文件 ,而 
导入 式 则 是 用 CSS 的 规则 引入 外 部 CSS 文件 ,因此 它们 的 语法 不 同 。 

此 外 ,这 两 种 方式 的 显示 效果 也 略 有 不 同 。 使 用 链接 式 时 ,会 在 装载 页 面 主体 部 分 之 
前 装载 CSS 文件 ,这 样 显示 出 来 的 网 页 从 一 开始 就 是 带 有 样式 效果 的 ;而 使 用 导入 式 时 ， 
则 在 整个 页 面 装 载 完 之 后 再 载 人 CSS 文件 ,如 果 页 面 文件 比较 大 , 则 开始 装载 时 会 显示 
无 样式 的 页 面 。 从 浏览 者 的 感受 来 说 ,这 是 使 用 导入 式 的 一 个 缺陷 。 

提示 : 在 学 习 CSS 或 制作 单个 网 页 时 ,为 了 方便 可 采取 行内 式 或 谋 入 式 方法 引入 
CSS, 但 车 要 制作 网 站 则 主要 应 采用 链接 式 引 入 外 部 CSS 文 件 ,以 便 能 对 网 站 内 所 有 页 面 
统一 设置 风格 。 在 使 用 外 部 样式 表 的 情况 下 ,可 以 通过 改变 一 个 外 部 CSS 文件 来 改变 整 
个 网 站 所 有 页 面 的 样式 。 


4.1.3 选择 器 的 分 类 


选择 器 是 为 了 定义 CSS 规则 的 作用 范围 ,为 了 能 够 灵活 选中 网 页 中 的 某 个 或 某 些 元 
素 ,CSS 定义 了 很 多 种 选择 器 。 其 中 ,基本 的 CSS 选择 器 有 标记 选择 器 .类 选择 器 ,id 选 
择 器 3 种 。 

1. 标记 选择 器 

标记 是 元 素 的 固有 特征 ,标记 选择 器 用 来 声明 哪 种 标记 采用 哪 种 CSS 样式 。 因 此 ， 


每 一 个 HTML 标记 名 都 可 以 作为 相应 的 标记 选择 器 的 名 称 ,标记 选择 器 形式 如 图 4-1 所 
示 , 它 将 属于 该 标记 的 所 有 元 素 全 部 选中 。 示 例 代码 (4-1. html) 如 下 。 


<style> 

i /* 标记 选择 器 * / 
color:blue; font- size:18px; 1 

</style> 
<p> 选 择 器 之 标记 选择 器 1< /p> <!-- 蓝 色 ,18px 大 --> 
<p> 选 择 器 之 标记 选择 器 2< /p> <!-- 蓝 色 ,18px 大 --> 
<p> 选 择 器 之 标记 选择 器 3< /p> <!-- 蓝 色 ,18px 大 --> 
<h3>h3 则 不 适用 < /h3> 


以 上 所 有 Pp 元 素 都 会 应 用 二 p 二 标记 选择 器 定义 的 样式 ,而 h3 元 素 则 不 会 受到 影响 。 

提示 : 本 书 对 代码 采用 了 简略 写法 , 书 中 CSS 代码 均 采 用 嵌入 式 引 入 HTML 文档 
中 。 因 此 ,读者 只 要 将 代码 中 二 style 二 … 一 /style 二 部 分 放置 在 文档 的 一 head 二 和 
< 到 /head> 之 间 ,将 其 他 HTML 代码 放置 在 王 body 二 和 到 /body 二 之 间 ,就 能 还 原 成 可 运 
行 的 原始 代码 。 


2. 类 选择 器 


标记 选择 器 一 旦 声明 ,那么 页 面 中 所 有 该 标记 的 元 素 都 会 产生 相应 的 变化 。 例 如 , 当 
声明 二 p 二 标记 为 红色 时 ,页 面 中 所 有 的 p 元 素 都 将 显示 为 红色 。 但 是 如 果 和 希望 其 中 某 些 
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p 元 素 不 是 红色 ,而 是 蓝 色 ,就 需要 将 这 些 p 元 素 自 定义 为 一 类 ,用 类 选择 器 来 选中 它们 ; 
或 者 希望 不 同 标记 的 元 素 属于 同一 类 ,应 用 同一 样式 ,如 希望 某 些 p 元 素 和 h3 元 素 都 是 
蓝 色 , 则 可 以 将 这 些 不 同 标记 的 元 素 定义 为 同一 类 。 也 就 是 说 ,标记 选择 器 根据 元 素 的 固 
有 特征 (标记 名 ) 分 类 ,好 比 人 可 以 根据 固有 特征 “肤色 ”分 为 黄种 人 、 黑 种 人 和 白 种 人 ,而 
类 选择 器 是 人 为 地 对 元 素 分 类 ,比如 人 又 可 以 分 为 教师 .医生 、 公 务 员 等 这 些 社会 自 定义 
的 类 别 。 

要 应 用 类 选择 器 ,首先 应 给 相应 的 元 素 添加 一 个 HTML 属性 : class ,为 元 素 定 义 类 
名 。 如 果 对 不 同 的 元 素 定义 相同 的 类 名 ,那么 这 些 元 素 将 被 划分 成 同一 类 ,例如 : 


<h3 class="test"> 将 该 元 素 划 入 test 类 < /h3> 
<p class= "test"> 将 该 元 素 划 人 test 类 < /p> 


再 根据 类 名 定义 类 选择 器 来 选中 该 类 元 素 ,类 选择 器 以 半角 *. "开头 ,格式 如 下 : 
"test{ color: red; font- size:20px; } 


类 选择 器 的 示例 代码 (4-2. html) 如 下 ,运行 效果 如 图 4-3 所 示 。 


<style> 
.one{ /* 类 选择 器 .one * / 
background- color: red; } /* 背景 颜色 红色 * / 
.two{ /* 类 选择 器 .two* / 
font- size: 12px; } /* 字 体 12px 大 */ 
</style> 
<p> 无 类 名 ,作为 对 比 < /p> 


<p class= "one"> 应 用 .one 的 样式 < /p> 

<p class="two"> 应 用 .two 的 样式 < /p> 

<p class="one two"> 同 时 应 用 .one 和 .two 样式 < /p> 
<h3 class= "two">h3 也 应 用 .two 的 样式 < /h3> 


其 中 两 个 p 元 素 和 h3 元 素 被 定义 成 了 同一 类 ,而 第 10 行 通过 class 二 "one two" 将 同 
时 应 用 两 种 类 选择 器 的 样式 ,得 到 红色 20 像素 的 大 字体 。 对 一 个 元 素 定 义 多 个 类 名 是 允 
许 的 ,就 好 像 一 个 人 既 属于 教师 又 属于 作家 一 样 。 第 7 行 的 p 元 素 因 未 定义 类 别名 则 不 
受 影响 , 仅 作为 对 比 。 





图 4-3 类 选择 器 示例 代码 
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3. id 选择 器 


id 选择 器 的 使 用 方法 与 类 选择 器 基本 相同 。 不 同 之 处 在 于 一 个 id 选择 器 只 能 应 用 
于 一 个 元 素 ,而 类 选择 器 可 以 应 用 于 多 个 元 素 。id 选择 器 以 半角 ”*# "开头 ,例如 : 


#one { color : blue; font- size:18px; } 


要 应 用 id 选择 器 定义 的 样式 ,首先 必须 给 元 素 添 加 “id” 属 性 ,如 二 img id 一 "picl" 盖 。 
id 选择 器 的 示例 代码 (4-3. html) 如 下 ,运行 效果 如 图 4-4 所 示 。 


<style> 

#one{ 
font-weight:bold; } /* 粗 体 */ 

#two{ 
font- size:24px; /* 字 体 大 小 */ 
background- color:#ff9; } /* 背景 颜色 * / 

</style> 
<p id= "one">ID 值 为 one< /p> <!-- 第 1 行 粗 体 --> 
<p id="two">ID 值 为 two< /p> <!-- 第 2 行 字体 .背景 颜色 改变 --> 
<p id= "two">ID 值 为 two< /p> <!-- 错 误 用 法 --> 
<p id= "one two">ID 值 为 one two< /p> <!-- 错 误 用 法 --> 


上 例 中 ,第 1 行 应 用 了 #one 定义 的 样式 。 而 第 2 行 。 而 ome 
和 第 3 行将 同一 个 id 选择 器 应 用 到 两 个 元 素 上 ,显然 违反 
了 一 个 id 选择 器 只 能 应 用 在 一 个 元 素 上 的 规定 ,但 浏览 器 ID 值 为 two 
却 也 应 用 了 CSS 样式 且 没 有 报错 。 | ee ID 值 为 two 
尽管 如 此 ,我 们 在 编写 CSS 代码 时 ,还 是 应 该 养 成 良 
好 的 编码 习惯 ,一 个 id 最 多 只 能 赋予 一 个 HTML 元 素 , 因 ID 值 为 one tm 
为 每 个 元 素 定 义 的 id 不 只 是 CSS 可 以 调用 ,JavaScript 等 ” 图 4-4 id 选择 器 示例 代码 
脚本 语言 也 可 以 调用 ,如 果 一 个 HTML 文档 中 有 两 个 相 
同 id 属性 的 元 素 ,那么 将 导致 JavaScript 在 查找 id 时 出 错 ( 如 getElementById() 函数 ) 。 
第 4 行 在 浏览 器 中 没有 任何 CSS 样式 风格 显示 ,这 意味 着 id 选择 器 不 支持 像 class 
选择 器 那样 的 多 个 id 名 同时 使 用 。 因 为 每 个 元 素 和 它 的 id 是 一 一 对 应 的 关系 ,不 能 为 一 
个 元 素 指定 多 个 id, 也 不 能 将 多 个 元 素 定义 为 一 个 id。 类 似 id= "one two" 这 样 的 写法 是 
错误 的 。 
关于 类 名 和 id 名 是 否 区 分 大 小 写 ,CSS 大 体 上 是 不 区 分 大 小 写 的 语言 ,但 对 于 类 名 
和 id 名 是 否 区 分 大 小 写 取决 于 标记 语言 是 否 区 分 大 小 写 ,如 果 使 用 HTML5 或 XHTML 
文档 类 型 声明 ,那么 类 名 和 id 名 是 区 分 大 小 写 的 。 另 外 ,id 名 或 类 名 的 第 一 个 字符 不 能 
为 数字 。 
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4.1.4 ”CSS 文本 修饰 


文本 的 美化 是 网 页 美观 的 一 个 基本 要 求 。 通 过 CSS 强大 的 文本 修饰 功能 ,可 以 对 文 
本 样式 进行 更 加 精细 的 控制 ,其 功能 远 比 HTML 中 的 二 font 二 标记 强大 。 

CSS 中 控制 文本 样式 的 属性 主要 有 font- 属 性 类 和 text- 属 性 类 ,再 加 上 修改 文本 颜 
色 的 color 属性 和 行 高 line-height 属性 。DW 中 这 些 属性 的 设置 是 放 在 CSS 规则 定义 面 
板 的 “类 型 "和 “区 块 " 中 的 。 下 面 是 利用 CSS 文本 属性 对 文章 进行 排版 的 例子 (4-4 
.html) ,其 显示 效果 如 图 4-5 所 示 。 


<style> 
hl { font- size: 16px; text-align: center; letter- spacing: 0.3em;} 
Pp {font- size: 14px; line-height: 160%; text- indent: 2em; margin:0;} 
.Source { color: #999; font- size:13px; text-align: right;} 

</style> 

<hl> 失 败 的 权利 < /hl> 

<p class="source">2006 年 5 月 11 日 美国 ( 侨 报 》< /p> 


上 利用 Css 文本 属性 进行 文章 x 
6 六 CG [日 le:///F:/ 网 页 课件 /Web2ndcode/ch04/4-2-1339| 三 


杯 的 远 烛 ， 也 有 败 走 麦 城 的 肖 开 ， 其 中 滋味 ， 不 亲身 经 历 是 无 法 体会 的 。 


他 们 队 有 个 传统 ， 就 是 比赛 结束 的 时 候 ， 家 长 们 站 成 一 排 ， 伸 手 跟 跑 过 来 
的 小 队员 击 掌 庆 贺 。 我 一 直 很 欣赏 这 个 传统 ， 这 是 一 个 技术 成 熟 的 足球 队 ， 在 
和 许多 足球 队 交 锋 的 时 候 几 乎 是 战 无 不 胜 的 。 

在 我 看 来 ， 就 这 个 动作 的 含义 而 言 ， 孩 子 们 是 当之无愧 的 。 

接受 孩子 的 失败 ， 就 给 了 他 成 功 的 机 会 。 


失败 的 权利 四 
06 年 5 月 11 日 美国 《 侨 报 
自从 儿子 进 了 足球 队 ， 我 们 便 随 着 他 转战 各 地 打 比赛 。 这 之 中 有 捧 回 冠军 





图 4-5 用 CSS 文本 属性 修饰 文本 


其 中 text-indent 表示 首 行 缩 进 , 在 每 段 开头 空 两 格 是 用 text-indent: 2em 实现 的 ， 
line-height: 160% 表 示 行 距 为 字体 高 度 的 1. 6 倍 ;letter-spacing 用 于 设置 字符 间 的 水 平 
间距 ;text-align 设置 文本 的 水 平 对 齐 方式 ;color 用 来 设置 文本 颜色 。 

大 多 数 HTML 元 素 在 浏览 器 中 的 默认 字体 大 小 是 16px, 显 得 过 大 ;行距 是 单 倍 行 
距 , 显 得 过 窗 。 因 此 制作 网 页 时 一 般 都 要 对 CSS 文本 属性 进行 调整 ,网 页 中 常用 的 字体 
大 小 有 12px 和 14px, 目 前 网 页 文本 样式 设计 的 趋势 是 采用 大 字体 .大 行距 。 

如 果 要 设置 的 字体 属性 过 多 ,可 以 使 用 字体 缩写 属性 : font, 例 如 “font: 12px/1.6 
Arial; ”表示 12 像素 字体 大 小 ,1.6 倍 行距 ,但 必须 同时 定义 字体 和 字号 才 有 效 , 因 此 这 条 
规则 中 定义 的 字体 “Arial? 是 不 能 省 略 的 。 
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4.2 “CSS 的 特性 


CSS 具有 两 大 特性 : 层 琶 性 和 继承 性 。 利 用 这 两 大 特性 可 大 大 减少 CSS 代码 的 


4.2.1 CSS 的 层 到 性 


所 谓 层 琶 性 ,是 指 多 个 CSS 选择 器 的 作用 范围 发 生 了 生 加 ,比如 页 面 中 某 些 元 素 同 
时 被 多 个 选择 器 选中 (就 好 像 同 一 个 案例 适用 于 多 个 法 律 条 文 一 样 )。 层 生性 讨论 的 问题 
是 : 当 有 多 个 选择 器 都 作用 于 同一 元 素 时 ,CSS 该 如 何 处 理 ? 

CSS 的 处 理 原 则 是 : 

(1) 如 果 多 个 选择 器 定义 的 规则 未 发 生 冲突 , 则 元 素 将 应 用 所 有 选择 器 定义 的 样式 。 
例如 下 面 代 码 (4-5. html) 的 显示 效果 如 图 4-6 所 示 。 


<style> 

p{ /* 标记 选择 器 * / 
color:blue; font- size:14px;} 

.extra{ /* 类 别 选择 器 * / 
font-weight: bold; text- decoration:underline; } 

#bb1{ /* id 选择 器 * / 
background- color:#FF9; } /* 背景 颜色 黄色 * / 

</style> 


<p> 标 记 选 择 器 选中 < /p><p> 标 记 选 择 器 2< /p> 
<p class="extra"> 标 记 、 类 选择 器 均 选中 < /p> 
<p id="bbl" class="extra"> 标 记 、 类 和 id 选择 器 均 选中 < /p> 





图 4-6 ”选择 器 层 释 不 冲突 时 的 样式 


在 代码 中 ,所 有 p 元 素 都 被 标记 选择 器 p 选中 ,同时 ,第 3.4 个 p 元 素 又 被 类 选择 器 
. special 选中 ,第 4 个 p 元 素 还 被 id 选择 器 underline 选中 ,由 于 这 些 选择 器 定义 的 规则 没有 
发 生 冲 突 , 所 以 被 多 个 选择 器 同时 选中 的 第 3、4 个 元 素 将 应 用 多 个 选择 器 定义 的 样式 。 

(2) 如 果 多 个 选择 器 定义 的 规则 发 生 了 冲突 , 则 CSS 按 选 择 器 的 优先 级 让 元 素 应 用 
优先 级 高 的 选择 器 定义 的 样式 。CSS 规定 选择 器 的 优先 级 从 高 到 低 依次 为 : 


行内 样式 >ID 样式 > 类 别 样式 > 标记 样式 
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总 的 原则 是 : 越 特殊 的 样式 ,优先 级 越 高 。 


示例 代码 (4-6. html) 如 下 。 


<style> 
pl /* 标记 选择 器 * / 
color:blue; /* 蓝 色 */ 
font- style: italic; /= 斜体 * / If 
.green{ /* 类 选择 器 * / 
color:green; /绿色 x*/ } 
.purplef 
color:purple; /= 紫色 * / } 
#red{ /* id 选择 器 * / 
color:red; /* 红 色 */ } 
</style> 


<p> 这 是 第 1 行文 本 < /p> 


<!-- 蓝 色 , 所 有 行 都 以 斜体 显示 --> 


<p class="green"> 这 是 第 2 行文 本 </p> <!-- 绿 色 --> 

<p class=" green" id= "red"> 这 是 第 3 行文 本 </p> <!-- 红 色 --> 
<p id="red" style="color:orange;"> 这 是 第 4 行文 本 </p> <!-- 黄 色 --> 
<p class= "purple green"> 这 是 第 5 行文 本 < /p> <!-- 紫 色 --> 


由 于 类 选择 器 的 优先 级 比 标记 选择 器 的 优先 级 高 ,而 类 选择 器 中 定义 的 文字 颜色 规 
则 和 标记 选择 器 中 定义 的 发 生 了 冲突 ,因此 被 两 个 选择 器 都 选中 的 第 2 行 p 元 素 将 应 用 
. green 类 选择 器 定义 的 样式 ,而 忽略 p 选择 器 定义 的 规则 ,但 p 选择 器 定义 的 其 他 样式 
还 是 有 效 的 。 因 此 第 2 行 p 元 素 显示 为 绿色 斜体 的 文字 ; 同 理 ,第 3 行 p 元 素 将 按 优先 级 
高 低 应 用 id 选择 器 的 样式 ,显示 为 红色 斜体 ;第 4 行 p 元素 将 应 用 行内 样式 ,显示 为 黄色 
斜体 ;第 5 行 p 元 素 同 时 应 用 了 两 个 类 选择 器 class 二 "purple green" ,两 个 选择 器 的 优先 
级 相同 ,这 时 会 以 CSS 代码 中 后 出 现 的 选择 器 (. purple) 为 准 , 显 示 为 紫色 斜体 。 

(3) limportant 关键 字 。 

!important 关键 字 用 来 强制 提升 某 条 声明 的 重要 性 。 如 果 在 不 同 选择 器 中 定义 的 声 
明 发 生 冲 突 , 而 且 某 条 声明 后 带 有 !important, 则 优先 级 规则 为 “!important 二 行内 样式 二 
ID 样式 二 类 别 样 式 二 标记 样式 ”。 对 于 上 例 ,如 果 给 .green 选择 器 中 的 声明 后 添加 
limportant, 则 第 3 行 和 第 5 行文 本 都 会 变 为 绿色 ,在 任何 浏览 器 中 都 是 这 种 效果 。 


/* 类 选择 器 * / 
/* 通 过!important 提升 该 样式 的 优先 级 * / 


.green{ 
color:green limportant; } 


如 果 在 同一 个 选择 器 中 定义 了 两 条 相 冲 突 的 规则 ,那么 IE6 总 是 以 最 后 一 条 为 准 , 不 
认 !important ,而 Chrome/IE7 十 以 定义 了 !important 的 为 准 。 


#box { 
color:red limportant; /* 除 IE6 以 外 的 其 他 浏览 器 以 这 一 条 为 准 * / 
color:blue; } /x* IE6 总 是 以 最 后 一 条 为 准 * / 


limportant 用 法 总 结 : 
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Qa 在 同一 选择 器 中 定义 的 多 条 样式 发 生 了 冲突 , 则 IE6 会 忽略 样式 后 的 limportant 
关键 字 , 总 是 以 最 后 定义 的 那 一 条 样式 为 准 ; 

@ 在 不 同 选择 器 中 定义 的 样式 发 生 冲 突 , 那 么 所 有 浏览 器 都 以 1important 样式 的 优 
先 级 为 最 高 。 


4.2.2 CSS 的 继承 性 


CSS 的 继承 性 是 指 如 果子 元 素 定义 的 样式 没有 和 父 元 素 定义 的 样式 发 生 冲突 ,那么 
子 元 素 将 继承 父 元 素 的 样式 风格 ,并 可 以 在 父 元 素 样式 的 基础 上 再 添加 新 的 样式 ,而 子 元 
素 的 样式 风格 不 会 影响 父 元 素 。 例 如 下 面 代码 (4-7. html) 的 显示 效果 如 图 4-7 所 示 。 


<style> 
body { 

text-align: center; font-size: 14px; text- decoration: underline; } 
p {background- color:#FF9; } /* 背景 黄色 * / 
.write{text-align: right; } 
</style> 

<h2> 十 二 星座 传说 < /h2>< !-- 蓝 色 --> 

<p><em> 白 羊 座 < /em> 的 传说 < /p> 

<p> 天 蝎 座 的 传说 < /p> 

<p class="write"> 作 者 : 莫 某 某 < /p> 


说 明 : 

@ 本 例 中 body 标记 选择 器 定义 的 文本 居中 ,14px 字 
体 、 带 下 面 线 等 属性 都 被 所 有 子 元 素 (h2 和 p) 所 继承 ,因此 
前 3 行 完 全 应 用 了 body 定义 的 样式 ,而 且 p 元 素 还 把 它 继 
承 的 样式 传递 给 了 子 元 素 em, 但 第 4 行 的 p 元 素 由 于 通过 4.7 CSS 的 继承 性 示例 
“. write" 类 选择 器 重新 定义 了 右 对 齐 的 样式 ,所 以 将 覆盖 父 
元 素 body 的 居中 对 齐 ,显示 为 右 对 齐 。 

@ 由 于 浏览 器 对 h2 标题 元 素 预定 义 了 默认 样式 ,该 样式 覆盖 了 h2 元 素 继承 的 
body 标记 选择 器 定义 的 14px 字体 样式 ,结果 显示 为 h2 元 素 的 字体 大 小 , 粗 体 。 可 见 , 继 
承 的 样式 比 元 素 的 浏览 器 默认 样式 的 优先 级 还 要 低 。 如 果 要 使 h2 元 素 显示 为 14px 大 
小 ,需要 对 该 元 素 直接 定义 字体 大 小 以 覆盖 浏览 器 默认 样式 。 

CSS 的 继承 贯穿 整个 CSS 设计 的 始终 ,每 个 标记 都 遵循 着 CSS 继承 的 概念 。 可 以 利 
用 这 种 巧妙 的 继承 关系 ,大 大 缩减 代码 的 编写 量 , 并 提高 可 读 性 ,尤其 在 页 面 内 容 很 多 且 
关系 复杂 的 情况 下 。 例 如 ,如 果 网 页 中 大 部 分 文字 的 字体 大 小 都 是 14px, 则 可 以 对 body 
元 素 定义 字体 大 小 为 12px。 这 样 其 他 元 素 都 会 继承 这 一 样式 ,就 不 需要 对 这 么 多 的 子 元 
素 分 别 定义 样式 了 ,有 些 特殊 的 地 方 如 果 字 体 大 小 要 求 是 18px, 则 可 再 利用 类 选择 器 或 
id 选择 器 对 它们 单独 定义 。 

实际 上 ,HTML 文档 是 一 个 如 图 4-8 所 示 的 树 形 结构 ( 称 为 文档 对 象 模 型 DOM) , 因 
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此 HTML 中 的 元 素 都 存在 继承 关系 ,CSS 的 继承 性 正 是 基于 元 素 的 这 种 继承 关系 。 
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图 4-8 文档 对 象 模型 (DOMD 图 


注意 : 并 不 是 所 有 的 CSS 属性 都 具有 继承 性 ,一 般 是 CSS 的 文本 属性 具有 继承 性 ， 
而 其 他 属性 (如 背景 属性 、 布 局 属性 等 ) 则 不 具有 继承 性 。 

具有 继承 性 的 属性 大 致 有 : color、font-( 以 font 开头 的 属性 ) textrindent textralign、 
line-height letter-spacing border-collapse .opacity 等 。 

无 继承 性 的 属性 : text-decoration、 所 有 盒子 属性 (边框 ,边界 、 填 充 ) ,布局 属性 (如 


float) 等 。 
4.2.3 选择 器 的 组 合 


每 个 选择 器 都 有 它 的 作用 范围 ,前 面 介绍 的 各 种 基本 选择 器 ,其 作用 范围 都 是 一 个 单 
独 的 集合 ,如 标记 选择 器 的 作用 范围 是 具有 该 标记 的 所 有 元 素 的 集合 ,类 选择 器 的 作用 范 
围 是 自 定义 的 一 类 元 素 的 集合 。 如 果 和 希望 对 儿 种 选择 器 的 作用 范围 取 交 集 、 并 集 、 子 集 以 
选中 需要 的 元 素 , 就 要 用 到 复合 选择 器 了 , 它 是 通过 对 几 种 基本 选择 器 的 组 合 ,实现 更 强 、 
更 方便 的 选择 功能 。 

复合 选择 器 就 是 两 个 或 多 个 基本 选择 器 ,通过 不 同方 式 组 合 形成 的 选择 器 。 主 要 有 
交集 选择 器 、 并 集 选 择 器 和 后 代 选 择 器 。 


1. 交集 选择 器 


交集 选择 器 是 由 两 个 选择 器 直接 连接 构成 ,其 结果 是 选中 两 者 各 自作 用 范围 的 交集 。 
其 中 第 一 个 必须 是 标记 选择 器 ,第 二 个 必须 是 类 选择 器 或 id 选择 器 。 例 如 ,hl. clasl;p 间 
intro, 这 两 个 选择 器 之 间 不 能 有 空格 。 格 式 如 下 : 


hl.clasl {color: green; font- size:24px;} 


交集 选择 器 将 选中 同时 满足 前 后 二 者 定义 的 元 素 , 也 就 是 前 者 定义 的 标记 类 型 ,并 且 
指定 了 后 者 类 名 或 id 的 元 素 。 下 面 的 代码 (4-8. html) 演 示 了 如 何 应 用 交集 选择 器 。 
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上 例 中 p 标记 选择 器 选中 了 第 1、3 行文 本 ;. special 类 选择 器 选中 了 第 3、4 行文 本 ， 
Pp. special 选择 器 选中 了 第 3 行文 本 ,是 两 者 的 交集 ,用 于 对 段落 文本 中 的 第 3 行进 行 特 
殊 的 控制 。 第 2 行 未 被 任何 选择 器 选中 , 仅 作对 比 。 


2. 并 集 选择 器 


所 谓 并 集 选择 器 ,其 实 就 是 对 多 个 选择 器 进行 集体 声明 ,多 个 选择 器 之 间 用 “,” 隔 开 ， 
其 中 每 个 选择 器 都 可 以 是 任意 类 型 的 选择 器 。 如 果 某 些 选择 器 定义 的 样式 完全 相同 ,或 
者 部 分 相同 ,就 可 以 用 并 集 选 择 器 同时 声明 这 些 选 择 器 完全 相同 或 部 分 相同 的 样式 。 

并 集 选 择 器 的 示例 代码 (4-9. html) 如 下 ,其 显示 效果 如 图 4-9 所 示 。 





”mx 
”2 
”元素 
h4 元 素 
i 


图 4-9 并 集 选择 器 示例 


代码 通过 集体 声明 hl、h2、h3、p 的 样式 ,为 选中 的 第 1、.2、3、5 行 的 元 素 添 加 了 背景 


色 , 然 后 对 需要 特殊 设置 的 第 2.4 行 添加 下 画 线 。 
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上 述 代 码 中 还 使 用 了 通配符 选择 器 * * ”, 网 页 中 任何 元 素 都 会 被 通配符 * ”选中 。 
3. 后 代 选 择 器 


在 CSS 选择 器 中 ,还 可 以 通过 幅 套 的 方式 ,对 内 层 的 元 素 进 行 控制 。 例 如 当 二 b 二 标 
记 被 包含 在 二 a 二 标记 中 时 ,就 可 以 使 用 后 代 选 择 器 a b{…} 选 中 出 现在 a 元 素 中 的 b 元 
素 。 后 代 选 择 器 的 写法 是 把 外 层 的 标记 写 在 前 面 , 内 层 的 标记 写 在 后 面 ,之 间 用 空格 隔 
开 , 后 代 选 择 器 的 示例 代码 (4-10. html) 如 下 ,显示 效果 如 图 4-10 所 示 。 


<style> 

a { font- size: 16px; color: red; } 

ab {background- color:#fcd; } 

</style> 

<b> 这 是 b 标 记 中 的 文字 < /b><br /> 

<a href="#"> 这 是 <b>a 标 记 中 的 b<span> 标 记 < /span></b></a> 


其 中 a 元 素 被 标记 选择 器 a 选中 ,显示 为 16px 红色 字体 ;而 
a 元 素 中 的 b 元 素 被 后 代 选 择 器 ab 选中 ,背景 色 被 定义 为 。 ”| 本 汪 w 交加 区 | 
淡 紫 色 ; 第 一 行 的 b 元 素 未 被 任何 选择 器 选中 。 人 
同 其 他 CSS 选择 器 一 样 ,后 代 选 择 器 定义 的 样式 同样 也 
能 被 其 子 元 素 继承 。 例 如 在 上 例 中 ,b 元 素 内 又 包含 了 span ”图 410 后 代 选 择 器 示例 
元 素 , 那 么 span 元 素 也 将 显示 为 淡 紫 色 。 这 说 明子 元 素 
(span) 继 承 了 父 元 素 (a b) 的 颜色 样式 。 
后 代 选 择 器 的 使 用 非常 广泛 ,实际 上 不 仅 标记 选择 器 可 以 用 这 种 方式 组 合 ,类 选择 器 
和 id 选择 器 也 都 可 以 进行 嵌 套 ,而 且 后 代 选 择 器 还 能 够 进行 多 层 嵌 套 。 例 如 ， 





.special b { color: red } /* 应 用 了 类 special 的 元 素 里 面包 含 的 <b> * / 
#menu 1i { padding: 0 6px; } /* id 为 menu 的 元 素 里 面包 含 的 <1i> * / 
td.top .banl strong{ font- size: 16px; } “ /* 多 层 髓 套 ,同样 适用 * / 

#menu a:hover b /* id 为 menu 的 元 素 里 的 a:hover 伪 类 里 包含 的 <b> * / 


提示 : 选择 器 的 谋 套 在 CSS 的 编写 中 可 以 大 大 减少 对 class 或 id 的 定义 。 因 为 在 构 
建 HTML 框架 时 通常 只 需 给 父 元 素 定义 class 或 id, 子 元 素 能 通过 后 代 选 择 器 选择 的 ， 
则 利用 这 种 方式 ,而 不 需要 再 定义 新 的 class 或 id。 


4. 复合 选择 器 的 优先 级 

复合 选择 器 的 优先 级 比 组 成 它 的 单个 选择 器 的 优先 级 都 要 高 。 我 们 知道 基本 选择 器 
的 优先 级 是 “id 选择 器 二 类 选择 器 二 标记 选择 器 ”, 所 以 不 妨 设 id 选择 器 的 优先 级 权重 是 
100, 类 选择 器 的 优先 级 权重 是 10, 标 记 选 择 器 的 优先 级 权重 是 1, 那 么 复合 选择 器 的 优先 
级 就 是 组 成 它 的 各 个 选择 器 权重 值 的 和 。 例 如 : 
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hl{color:red;} /* 权重 =1*/ 
Pp em{color:blue;} /* 权重 =2*/ 
.warning{color:yellow;} /* 权 重 =10*/ 
P.note em.dark{color:gray;} /* 权 重 =22*/ 
#main{color:black;} /* 权重 =100*/ 


当权 重 值 一 样 时 ,会 采用 “ 层 秋 原则 ”, 一 般 后 定义 的 会 被 应 用 。 
下 面 是 复合 选择 器 优先 级 计算 的 一 个 例子 (4-11. html) 。 


<style> 
#aa ul 1i {color:red 
-aa { color:blue } 
</style> 
<div id="aa"> 
<ul><1i class="aa"> 
C55 常见 问题 之 <em class="aa"> 复 合 选择 器 < /em> 的 优先 级 
</1i> 
</ul></div> 


对 于 三 li 二 标记 中 的 内 容 , 它 同时 被 *#aa ul lj” 和”*. aa” 两 个 选择 器 选中 ,由 于 #aa ul 
li 的 优先 级 为 102 ,而 . aa 的 优先 级 为 10, 所 以 在 中 的 内 容 将 应 用 #aa ul li 定义 的 规则 , 文 
字 为 红色 ,如 果 和 希望 文字 为 蓝 色 , 可 提高 .aa 的 特殊 性 ,将 其 改写 成 “#aa ul li. aa”。 

另外 ,代码 中 em 元 素 内 的 文字 颜色 为 蓝 色 ,因为 直接 作用 于 em 元 素 的 选择 器 只 有 
“. aa”, 虽 然 em 也 会 继承 *#aa ul li” 选 择 器 的 样式 ,但 是 继承 的 样式 优先 级 最 低 ,会 被 类 
选择 器 “, aa 定义 的 样式 所 蓝 盖 。 

综 上 所 述 ,CSS 样式 的 优先 级 如 图 4-11 所 示 。 


limportant 样式 


行内 样式 
id 选择 器 
标记 选择 器 
4 对 标记 预定 义 的 样式 
继承 的 样式 



































图 4-11 CSS 样式 的 优先 级 


其 中 ,浏览 器 对 标记 预定 义 的 样式 是 指 对 于 某 些 HTML 标记 ,浏览 器 预先 对 其 定义 
了 默认 的 CSS 样式 ,如 果 用 户 没 有 重新 定义 样式 ,那么 浏览 器 将 按 其 定义 的 默认 样式 显 
示 , 常 见 的 HTML 标记 在 标准 浏览 器 (如 Chrome) 中 的 默认 样式 如 下 。 
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body { margin: 8px; line-height: 1.12em } 

hl { font- size: 2em; margin: .67em 0 } 

h2 { font-size: 1.5em; margin: .75em 0 } 

h3 { font- size: 1.17em; margin: .83em 0 } 

h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu { margin: 1.12em 0 } 
h5 { font- size: .83em; margin: 1.5em 0 } 

h6 { font- size: .75em; margin: 1.67em 0 } 

hl, h2, h3, h4,h5, hé6, b,strong { font-weight: bolder } 


有 些 元 素 的 预定 义 ( 默 认 ) 的 样式 在 不 同 的 浏览 器 中 区 别 很 大 ,例如 ul、ol 和 dd 等 列 
表 元 素 ,IE 中 的 默认 样式 是 : ul,ol, dd{margin-left:40px;) ,而 Firefox 中 的 默认 样式 定 
义 为 : ul,ol,dd {padding-left:40px;}。 因 此 ,要 清除 列表 的 默认 样式 ,一般 可 以 设置 ; 


ul, ol, dd { 
list- style- type:none; /* 清除 列表 项 目 符号 * / 
margin:0; /* 清除 IE 左 缩 进 * / 
padding:0; /* 清除 非 IE 左 缩 进 */ } 


4.3 “CSS 高 级 选择 器 
4.3.1 关系 选择 器 


关系 选择 器 用 来 选中 指定 元 素 的 儿子 、 见 弟 、 后 代 等 元 素 ,它们 能 给 CSS 设计 带 来 方 
便 , 而 且 对 以 后 学 习 jQuery 的 选择 器 也 是 很 有 帮助 的 。 


1. 子 选 择 器 


子 选 择 器 用 于 选中 元 素 的 直接 后 代 ( 即 儿子 ) , 它 的 定义 符号 是 大 于 号 (二 ) ,示例 代码 
(4-12. html) 如 下 。 


body>p { color: green; | 

<body> 
<p> 这 一 段 文字 是 绿色 < /p> 
<div><p> 这 一 段 文字 不 是 绿色 </p></div> 
<P> 这 一 段 文字 是 绿色 < /p> 

</body> 


只 有 第 1 个 和 第 3 个 段落 的 文字 会 变 绿色 ,因为 它们 是 body 元 素 的 直接 后 代 , 所 以 
被 选中 。 而 第 2 个 p 元素 是 body 的 间接 后 代 , 不 会 被 选中 ,如 果 把 (body 之 p) 改 为 后 代 
选择 器 (body p) ,那么 3 个 段落 都 会 被 选中 。 这 就 是 子 选 择 器 和 后 代 选 择 器 的 区 别 。 后 
代 选 择 器 可 选中 任何 后 代 。 

















2. 相 邻 选择 器 


相 邻 (adjacent-sibling) 选 择 器 的 语法 是 “E 十 F”, 用 于 选中 元 素 丰 后 面 紧 邻 的 一 个 兄 
弟 ( 弟 弟 )F 元 素 ( 这 两 个 元 素 具 有 共同 的 父 元 素 , 并 且 紧 邻 在 一 起 ) ,示例 代码 (4-13 
.html) 如 下 。 





可 见 ,共有 两 行 被 选中 。 其 中 ,在 最 后 一 个 h2 元 素 后 ,尽管 紧 接着 的 是 一 段 文字 ,但 
那些 文字 不 属于 任何 标记 ,因此 紧 随 这 些 文字 之 后 的 第 一 个 p 元 素 也 会 被 选中 。 

如 果 和 希望 紧 跟 在 h2 后 面 的 任何 元 素 都 变 成 红色 ,可 使 用 如 下 方法 ,那么 第 二 个 h2 后 
的 div 元 素 也 会 被 选中 。 





3. 兄弟 选择 器 


见 弟 选择 器 的 语法 是 “E~F”, 用 于 选中 元 素 玉 后 面 的 所 有 兄弟 下 元 素 , 示 例 代码 (4- 
14. html) 如 下 。 





可 见 , 兄 弟 选择 器 选中 了 所 有 的 弟弟 元 素 , 其 选择 范围 比 相 邻 选择 器 更 广 。 
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4.3.2 属性 选择 器 


引入 属性 选择 器 后 ,CSS 变 得 更 加 复杂 、 准 确 、 功 能 强大 。 属 性 选择 器 主要 有 3 种 形 


式 , 分 别 是 匹配 属性 、 匹 配属 性 和 值 、 匹 配属 性 和 值 的 一 部 分 。 属 性 选择 器 的 定义 方式 是 
将 属性 和 值 写 在 “[]” 内 ,“[j” 前 面 可 以 加 标记 名 、 类 名 等 基本 选择 器 。 


1. 匹配 属性 E[att] 
属性 选择 器 选中 具有 某 个 指定 属性 的 元 素 , 例 如 : 


a[lname] {color:purple; } /* 选中 具有 name 属性 的 a 元素 * / 
img [border] {border- color:gray;} /* 选中 具有 border 属性 的 img 元 素 * / 
[special] {color:red;} /* 选中 具有 special 属性 的 任何 元 素 * / 


在 这 些 情况 下 ,只 要 给 定 属性 在 元 素 中 出 现 ( 无 论 属性 值 是 什么 ), 便 会 匹配 该 属性 选 


择 器 ,还 可 给 元 素 自 定义 一 个 它 没有 的 属性 名 ,如 二 img special 二 "" 记 ,那么 这 个 img 元 
素 会 被 [special] 属 性 选择 器 选中 ,这 时 属性 选择 器 的 作用 就 相当 于 类 或 id 选择 器 。 


2. 匹配 属性 和 值 ELatt="val"] 
属性 选择 器 也 可 根据 元 素 具有 的 属性 和 值 来 匹配 ,例如 : 
a[href="http://www.hynu.cn"] {color:yellow; } /* 选中 指向 www.hynu.cn 的 链接 * / 


input [type= "submit"] {background:purple; } /* 选 中 表单 中 的 提交 按钮 * / 
img[alt="Sony Logo"] [class="pic"] {margin:20px;} /* 同时 匹配 两 个 属性 和 值 * / 


这 样 , 用 属性 选择 器 就 能 很 容易 地 选中 某 个 特定 的 元 素 , 而 不 用 为 这 个 特定 的 元 素 定 


义 一 个 id 或 类 ,再 用 id 或 类 选择 器 去 匹配 它 了 。 


3. 匹配 部 分 属性 值 
CSS 提供 了 5 种 匹配 部 分 属性 值 的 属性 选择 器 ,如 表 4-2 所 示 。 
表 4-2 匹配 部 分 属性 值 的 属性 选择 器 








选 择 器 功 能 
E[att 一 一 "val"] 选择 att 属性 值 为 一 个 用 空格 分 隔 的 词 列 表 , 其 中 一 个 词 是 val 的 下 元 素 
ELatt * 一 "val"] 选择 att 属性 值 中 包含 字符 串 val 的 下 元 素 
E[att| 一 "val"] 选择 att 属性 值 以 val- 开 头 或 属性 值 为 val 的 下 元 素 
E[att*="val"] 选择 att 属性 值 为 以 val 开头 的 下 元 素 
ELatt $ 一 "val"] 选择 att 属性 值 为 以 val 结尾 的 下 元 素 








其 中 ,E[att 一 一 "val"] 能 匹配 属性 值 列 表 中 的 单个 属性 值 , 由 于 对 一 个 元 素 可 指定 


多 个 类 名 ,匹配 单个 属性 值 的 选择 器 就 可 以 选中 具有 某 个 类 名 的 元 素 , 这 才 是 它 的 主要 
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用 途 。 
属性 选择 器 的 示例 代码 (4-15. html) 如 下 。 
h2[class~="two"] { color: red;} /* 匹配 具有 类 名 为 two 的 h2 元 素 */ 
h2[class*="wo"]{ font- style:italic;} /* 匹配 成 功 * / 
h2[class$="ree"]{ text- decoration:underline;} /* 匹配 成 功 */ 
h2[class^="on"]{ background- color:#fcc;} /* 匹配 成 功 */ 
pldatal="a"] { color:green; font-weight:bold; } /* 匹配 成 功 */ 


<h2 class="one two three"> 文 字 是 红色 </h2> 
<p data="a- test"> 这 一 段 文字 是 绿色 < /p> 


4.3.3 伪 类 选择 器 


伪 类 (pseudo-class) 是 用 来 表示 动态 事件 .状态 改变 或 者 是 在 文档 中 以 其 他 方法 不 能 
轻易 实现 的 情况 一 一 例如 用 户 的 鼠标 指针 晤 停 或 单 击 某 元 素 。 总 的 来 说 , 伪 类 可 以 对 目 
标 元 素 出 现 某 种 特殊 的 状态 应 用 样式 。 这 种 状态 可 以 是 鼠标 指针 停留 在 某 个 元 素 上 ,或 
者 是 访问 一 个 超 链 接 。 伪 类 允许 设计 者 自由 指定 元 素 在 一 种 状态 下 的 外 观 。 


1. 常见 的 伪 类 选择 器 


常见 的 伪 类 有 4 个 ,分 别 是 :link( 链 接 )、: visited( 已 访问 的 链接 )、:hover( 鼠 标 指针 
悬 停 状态 ) 和 :active( 激 活 状 态 ) 。 其 中 前 面 两 个 称 为 链接 伪 类 ,只 能 应 用 于 链接 (a) 元 素 ， 
后 两 种 称 为 动态 伪 类 ,理论 上 可 以 应 用 于 任何 元 素 。 其 他 的 一 些 伪 类 ,如 : focus, 表 示 获 
得 焦点 时 的 状态 ,一般 用 在 表单 元 素 上 。 

伪 类 选择 器 前 面 必 须 是 标记 名 (或 类 名 ,id 名 等 选择 器 名 ) ,后 面 是 以 “:? 开 头 的 伪 类 
名 ,如 图 4-12 所 示 。 















































伪 类 名 声明 声明 
a:hover { | color: Sons font-size: 2 } 
| 1 
标记 名 属性 值 属性 值 


图 4-12 伪 类 选择 器 


图 4-12 中 的 伪 类 选择 器 作用 是 定义 所 有 a 元 素 在 鼠标 指针 悬 停 (hover) 状 态 下 的 
样式 。 

2. 制作 动态 超 链 接 

在 HTML 中 , 超 链接 默认 都 是 统一 的 蓝 色 带 下 面 线 ,被 单 击 过 的 超 链接 则 为 紫色 带 
下 画 线 ,这 种 传统 的 超 链 接 样式 看 上 去 过 于 呆板 。 

在 CSS 中 ,去 掉 文本 下 面 线 的 方法 是 设置 : text-decoration: none; 添 加 下 面 线 则 是 : 
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text-decoration: underline; text-decoration 属性 的 其 他 值 还 有 line-through (中 面 线 )， 
overline( 上 夯 线 ) 等 。 

为 了 让 网 页 中 的 超 链接 具有 动态 效果 ,例如 , 超 链接 初始 时 没有 下 面 线 ,而 当 鼠 标 经 
过 超 链接 上 时 , 超 链接 会 变色 并 添加 下 画 线 等 ,以 提示 用 户 可 以 点 击 。CSS 伪 类 选择 器 
可 以 实现 这 种 动态 超 链 接 效果 。 
因为 伪 类 可 以 描述 超 链接 元 素 在 各 种 状态 下 的 样式 ,所 以 通过 定义 a 元 素 的 各 种 伪 
类 具有 不 同 的 样式 ,就 能 制作 出 千变万化 的 动态 超 链 接 效果 。 具 体 来 说 ,a 元 素 可 定义 的 
伪 类 有 4 种 ,用 来 描述 链接 的 4 种 状态 ,如 表 4-3 所 示 。 

表 4-3 超 链接 一 a 二 标记 的 4 个 伪 类 











伪 类 作 用 

a:link 超 链接 的 普通 样式 风格 , 即 正常 浏览 状态 时 的 样式 
a:visited 被 单 击 过 的 超 链接 的 样式 风格 

a:hover 鼠标 指针 悬 停 在 超 链接 上 时 的 样式 风格 

a:active 当前 激活 (在 鼠标 单 击 与 释放 之 间 发 生 ) 的 样式 风格 





只 要 分 别 定义 上 述 4 种 状态 (或 其 中 几 种 ) 的 样式 代码 ,就 能 实现 动态 超 链接 效果 ,如 
图 4-13 所 示 。 代 码 (4-16.htmlb 如 下 。 


<style> 

a {font- size: 14px; text- decoration: none;} /* 设 置 链接 的 默认 状态 * / 
a:link {color: #666;} 

a:visited {color: #000;} /* 点击 过 后 的 样式 * / 


a:hover {color: #900; text- decoration: underline; background:#9CF;} 
a:active {color: #FF3399;} </style> 
<a href="#"> 首 页 </a><a href="#"> 系 部 概况 </a><a href="#"> 联 系 我 们 < /a> 


上 例 中 分 别 定义 了 链接 在 4 种 不 同 的 状态 下 具有 不 同 的 
颜色 ,在 鼠标 悬 停 时 还 将 添加 下 画 线 并 改变 背景 颜色 。 需 要 注 
(1) 链接 伪 类 选择 器 的 书写 应 遵循 LVHA 的 顺序 . 即 CSS 4-13 ”动态 超 链接 
代码 中 4 个 选择 器 出 现 的 顺序 应 为 a:link 一 a:visited 一 a: 
hover> a:active, 车 违反 这 种 顺序 , 某 些 样式 可 能 不 起 作用 。 

(2) 各 种 a 的 伪 类 选择 器 将 继承 二 a 二 标记 选择 器 定义 的 样式 。 

(3) a:link 选择 器 只 能 选中 具有 href 属性 的 二 a 二 标记 ,而 a 选择 器 能 选中 所 有 
二 a 二 标记 ,包括 用 作 锚 点 的 二 a 二 标记 。 





3. 制作 动态 图 片 边框 效果 


在 CSS2.0 十 规范 中 ,任何 元 素 都 支持 动态 伪 类 ,所 以 像 li: hover、img: hover、 div: 
hover 和 p:hover 这 些 伪 类 都 是 合法 的 。 使 用 伪 类 还 能 控制 元 素 的 后 代 或 兄弟 元 素 的 动 
态 效 果 。 例 如 ,li:hover ul( 控 制 悬 停 时 后 代 元 素 的 样式 ) ,img:hover 一 b( 控 制 悬 停 时 兄 
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弟 元 素 的 样式 ) ,下 面 是 一 个 示例 程序 (4-17. html) ,运行 效果 如 图 4-14 所 示 。 


<style> 
af display: inline - block; text- align: center; width: 164px; text - decoration: 
none;} 
a img{ display:inline-block; padding:6px; border:1px solid transparent;} 
a img:hover{border:1px solid #009;} /* 改变 边框 颜色 * / 
a img:hover~b{ color:#F00; text-decoration:underline;} </style> 
<a href="#"><img src="images/picl.jpg" /><b> 楼 兰 古城 遗址 </b></a> 








楼 兰 古城 遗址 村 兰 盐城 透 址 
图 4-14 动态 图 片 边框 效果 ( 左 为 默认 状态 , 右 为 鼠标 经 过 时 ) 


4.:first-child 伪 类 


:first-child 伪 类 选择 器 用 于 匹配 它 的 父 元 素 的 第 一 个 子 元 素 , 也 就 是 说 ,这 个 元 素 是 
其 父 元 素 的 第 一 个 儿子 ,而 无 论 它 的 父 元 素 是 哪个 。 示 例 代码 (4-18. html) 如 下 。 


p:first-childt{ font- weight: bold; } 

<body> 

<p> 这 一 段 文字 是 粗 体 < /p> <!-- 第 1 行 ,被 选中 --> 
<h2> 下 面 哪些 文字 是 粗 体 的 呢 < /h2> 

<p> 这 一 段 文字 不 是 粗 体 < /p> 

<h2> 下 面 哪些 文字 是 粗 体 的 呢 < /h2> 

<div><p> 这 一 段 文字 是 粗 体 < /p> <!-- 第 5 行 ,被 选中 --> 
<p> 这 一 段 文字 不 是 粗 体 </p>< /div> 

<div> 下 面 哪些 文字 是 粗 体 的 呢 

这 一 段 文字 不 是 

<p> 这 一 段 文字 是 粗 体 < /p> <!-- 第 9 行 ,被 选中 --> 
<p> 这 一 段 文字 不 是 的 < /p></div> 

</body> 


这 段 文字 共有 3 行 会 以 粗 体 显示 。 第 1 行 p 是 其 父 元 素 body 的 第 1 个 儿子 ,被 选 
中 ;第 5 行 p 是 父 元 素 div 的 第 1 个 儿子 ,被 选中 ;第 9 行 p 也 是 父 元 素 div 的 第 1 个 儿 
子 , 也 被 选中 ,尽管 它 前 面 还 有 一 些 文字 ,但 那 不 是 元 素 。 


5. :focus 伪 类 
:focus 用 于 定义 元 素 获得 焦点 时 的 样式 。 例 如 ,对 于 一 个 表单 来 说 , 当 光 标 移动 到 某 
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个 文本 框 内 时 (通常 是 点 击 了 该 文本 框 或 使 用 Tab 键 切 换 到 了 这 个 文本 框 上 ), 这 个 
input 元 素 就 获得 了 焦点 。 因 此 ,可 以 通过 input:focus 伪 类 选中 它 , 改 变 它 的 背景 色 ,使 
它 突 出 显示 ,代码 如 下 : 


input:focus { background: yellow; } 


对 于 不 支持 :focus 伪 类 的 IE6 浏览 器 ,要 模拟 这 种 效果 ,只 能 使 用 两 个 事件 结合 
JavaScript 代码 来 模拟 ,它们 是 onfocus( 获 得 焦点 ) 和 onblur( 失 去 焦点 ) 事 件 。 


4.3.4 使 用 过 渡 属 性 配合 动态 伪 类 效果 


CSS 的 动态 伪 类 能 为 网 页 添加 一 些 动态 效果 ,但 动态 伪 类 没有 中 间 状 态 , 当 一 个 属 
性 的 值 发 生变 化 时 ,这 种 改变 是 突然 发 生 的 。 比 如 一 个 元 素 的 宽度 是 100px, 当 鼠标 指针 
悬 停 在 上 面 时 ,宽度 改变 为 250px, 这 两 种 状态 之 间 并 没有 平滑 地 变化 ,而 是 在 这 两 种 状 
态 之 间 发 生 了 跳跃 。 为 此 ,CSS3 引入 了 过 渡 (Transitions) 模 块 ,提供 了 改变 这 种 变换 方 
式 的 选项 。 在 CSS 中 ,过 渡 就 是 让 一 个 属性 在 两 种 状态 之 间 平 滑 改变 的 动画 。 

为 了 让 过 渡 发 生 ,必须 满足 4 个 条 件 : 一 个 初始 状态 .一 个 终止 状态 .过 渡 特 征 ( 如 过 
渡 时 间 和 过 渡 的 属性 值 等 ) 和 触发 器 (如 鼠标 指针 悬 停 )。 示 例 代 码 (4-19. html) 如 下 。 


div{ width:100px; /初始 状态 * / 

height:40px; background:#fcc; line-height:40px; 

transition:width 0.5s;} /* 过 渡 特 征 * / 
div:hover {width:300px;} /* 终止 状态 ,触发 器 为 hover* / 
<div> 演 示 过 渡 效 果 < /div> 


该 例 产生 的 动画 效果 是 , 当 鼠 标 滑 到 div 元 素 上 时 ,div 元 素 的 宽度 会 从 100px 逐渐 
伸展 到 300px', 动 画 持续 时 间 为 0. 5s。 


1. 过 渡 属 性 详解 
CSS3 的 过 渡 使 用 transition 属性 来 定义 ,transition 属性 的 基本 语法 如 下 : 


transition: transition-Property transition- duration transition- timing- function 


transition- delay; 


transition 属性 实际 上 是 4 个 属性 的 简写 ,其 各 个 属性 值 的 含义 如 下 。 
指定 元 素 的 某 个 属性 上 会 有 动画 效果 。 例 如 : 








(1) transition-property 


transition-property:width; /< 在 width 属性 上 应 用 过 渡 * / 
transition-Pproperty:font- size; /* 在 font-size 属性 上 应 用 过 渡 * / 
transition-property:all; /= 在 所 有 属性 上 应 用 过 渡 * / 





指定 过 渡 从 开始 到 结束 的 持续 时 间 。 其 属性 值 是 


(2) transition-duration 属性 
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一 个 时 间 值 (如 0. 5s) ,单位 是 s( 秒 ) 或 者 ms( 毫 秒 )。 默 认 值 是 0s, 如 果 提 供 一 个 负 值 给 
该 属性 , 则 也 会 被 解释 为 0s。 例 如 : 


transition- duration: 2s; /* 过 渡 持 续 时 间 为 2s* / 


注意 : transition-duration 是 创建 过 渡 的 唯一 一 个 必要 的 属性 ,如 果 其 他 过 渡 属 性 都 
省 略 , 但 声明 了 transition-duration, 过 渡 也 会 发 生 , 但 反 过 来 则 不 行 。 

(3) transition-timing-function 属性 一 一 能 够 让 动画 在 过 渡 持 续 期 间 在 速度 上 有 变 
化 ,对 动画 的 节奏 进行 控制 。 该 属性 的 取 值 有 两 种 不 同 的 类 型 : 关键 字 和 cubic-bezier 
函数 。 

关键 字 的 取 值 有 以 下 几 种 。 

@ ease 一 一 默认 值 ,平稳 开始 和 结束 , 即 动画 开始 和 结束 时 比较 慢 , 中 途 时 比较 快 。 

© linear 动态 效果 一 直 都 匀速 进行 。 

@ ease-in 一 一 平稳 开始 ,动画 效果 开始 时 比较 慢 ,然后 不 断 加 速 直到 结束 。 

@ ease-out 一 一 平稳 结束 ,动画 效果 开始 时 比较 快 ,然后 不 断 减速 直到 结束 。 

@ ease-in-out 一 一 类 似 于 ease 值 , 但 加速 减速 没有 那么 明显 。 

(4) transition-delay 属性 用 于 延迟 一 段 时 间 后 再 开启 过 渡 效 果 , 例 如 希望 在 过 渡 开 
始 前 设置 0. 5s 的 延迟 ,可 以 使 用 下 面 的 代码 : 











transition- delay: 0.5s; 


transition-delay 属性 也 可 设置 负 值 .考虑 一 个 3s 的 过 渡 , 但 延迟 了 一 1s。 当 该 过 渡 
被 触发 时 ,过 渡 会 立即 开始 ,但 看 上 去 就 像 是 已 经 过 去 了 1s 一 样 ,也 就 是 说 ,整个 过 渡 会 
从 中 途 开始 。 


2.transition 属性 的 简写 


如 果 要 对 过 渡 属 性 进行 简写 , 则 可 使 用 transition 属性 接 2 一 4 个 值 ,因为 过 渡 的 速度 
变化 和 过 渡 前 的 延迟 两 个 属性 是 可 以 省 略 的 。 但 是 ,不 管 怎么 写 ,transition-delay 值 必须 
写 在 transition-duration 值 的 后 面 。 下 面 是 transition 缩写 的 几 个 示例 。 


transition: color .5s ease-in .1s; /* 作用 属性 持续 时 间 速度 变化 延迟 * / 
transition: color .5s .1s; /* 作 用 属性 持续 时 间 延迟 * / 
transition: color .5s; /* 作 用 属性 持续 时 间 * / 

3. 多 重 过 渡 


可 以 为 独立 属性 或 简写 属性 提供 一 系列 用 逗号 分 隔 的 值 , 这 样 就 能 把 多 种 过 渡 效 果 
添加 到 同一 个 元 素 上 。 例 如 ,下 面 两 个 div 选择 器 的 代码 都 是 多 重 过 渡 的 例子 。 
div{transition:width 2s, height 1.5s, padding— left 4s;} 


div{transition-property: width, height, padding— left; 


transition- duration: 2s, 1.5s,4s} 
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如 果 多 个 属性 的 过 滤 效 果 完 全 相同 , 则 不 需要 使 用 多 重 过 渡 , 设 置 transition- 


property 的 值 为 all 即 可 。 但 是 , 值 为 all 时 将 导致 浏览 器 解析 CSS 代码 的 速度 变 慢 。 


下 面 是 一 个 多 重 过 渡 效果 的 实例 (4-20. html) ,分 别 对 div 元 素 的 width height 和 





padding 应 用 了 过 渡 ,使 div 元 素 逐 渐变 大 并 且 文 字 向 右 移动 ,运行 效果 如 图 4-15 所 示 。 





<style> 

div{ width:100px; height:40px; background:#fcc; line- height:40px; 
transition: width 2s, height 1.5s, padding- left 4s; } 

div:hover{width:300px;padding- left:140px; height:80px;} 

</style> 


<div> 演 示 过 渡 效 果 < /div> 


演示 过 渡 效 果 演示 过 渡 效果 


图 4-15 过 渡 效 果 演 示 实 例 


4. 过 渡 效 果 综 合 实例 
图 4-16 是 一 个 移动 的 列表 项 , 当 鼠 标 指针 滑 和 人 到 某 个 列表 项 (1i 元 素 ) 上 时 ,列表 项 


中 的 文字 会 向 右 移动 ,同时 逐渐 出 现 黄色 背景 ,并 且 列表 符号 由 方块 变 为 圆 形 。 代 码 
(4-21. html) 如下。 
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ul{padding:0; margin:0; list- style:none;} 
li{font- size:14px; padding:8px; transition:all .5s;} 
1i pb{float:left; width:16px; height:16px; background:#900; margin- right:12px; 
transition:all .5s;} /* 用 作 列 表 符号 ,初始 为 方块 * / 
li:hover{background- color:#FFFF99; font- size:16px; padding- left:30px;} 
li:hover b{border- radius:50%; background:#900;} /* 列表 符号 变 为 圆 形 * / 
<ul> 

<1i><b>< /b> 过 渡 作 用 属性 < /1i> <1i><b>< /b> 过 渡 持 续 时 间 < /1i> 

<1i><b>< /b> 动画 速度 变化 < /1i> <1i><b>< /b> 过 渡 前 延迟 时 间 </1i> 
</ul> 


国 过 流 作用 属性 

图 过 渡 持 续 时 间 NR 
用 动画 速度 变化 
国 过滤 前 延 R 时 间 








图 4-16 移动 的 列表 项 


CSS 样式 美化 


4.3.5 伪 元 素 选 择 器 


在 CSS 中 伪 元 素 选 择 器 主要 有 :first-letter、 :first-line 以 及 :before 和 :after。 之 所 以 
称 它们 为 “ 伪 元 素 ”, 是 因为 它们 在 效果 上 使 文档 中 产生 了 一 个 临时 的 元 素 , 这 是 应 用 “ 虚 
构 标记 ”的 一 个 典型 实例 。 


1. :first-letter 和 :first-line 


:first-letter 用 于 选中 元 素 内 容 中 的 首 个 字符 , :first-line 用 于 选中 元 素 内 容 中 的 首 
行文 本 。 无 论 元 素 显 示 的 区 域 是 宽 还 是 窄 ,样式 都 会 准确 地 应 用 于 首 行 。 如 果 段 落 的 首 
行 只 有 5 个 汉字 , 则 只 有 这 5 个 汉字 会 应 用 样式 。 如 果 首 行 包 含 30 个 汉字 ,那么 这 30 个 
汉字 都 会 应 用 样式 。 下 面 是 一 个 p 元 素 的 CSS 代码 (4-22. html) ,其 显示 效果 如 图 4-17 
所 示 。 





Pp:first- letter { font- size: 2em; float: left;} 
p:first-line { font-weight: bold; letter- spacing: 0.3em;} 
<p> 春 天 来 临 ,又 到 了 播种 耕种 的 季节 ,新 皇后 将 炒 熟 了 的 麦子 ……< /p> 


line - Worille 12220 FE 


文件 四 炉 弗 @) 查看 WD 历史 名 书签 四 工具 四 
又 到 了 播 





春天 来 种 耕种 的 季节 ， 
和 入 和 全 二 
农夫 。 中 光 了 的 赤子 怎样 流水 、 
当然 都 无 法 发 出 





图 4-17 :first-letter 和 :first-line 的 应 用 


注意 : 可 供 :first-line 使 用 的 CSS 属性 有 一 些 限制 , 它 只 能 使 用 字体 、 文 本 和 背景 属 
性 ,不 能 使 用 盒子 模型 属性 (如 边框 .背景 ) 和 布局 属性 。 


2. :before 和 :after 


:before 和 :after 两 个 伪 元 素 必须 配合 content 属性 使 用 才 有 意义 。 它 们 的 作用 是 在 
指定 的 元 素 内 产生 一 个 新 的 行内 元 素 ,该 行内 元 素 的 内 容 是 由 content 属性 值 决定 的 。 
例如 下 面 代码 (4-23. html) 的 效果 如 图 4-18 所 示 。 


<style> 
Pp:before, p:after{content: "-—"; color:red;} 
</style> 
<p> 看 这 一 段 文字 的 左右 < /p> 
<p> 这 一 段 文字 左右 < /p> 


可 以 看 到 ,通过 产生 内 容 属 性 ,p 元 素 的 左边 和 右边 都 添加 了 一 个 新 的 行内 元 素 , 它 
们 的 内 容 是 "--" ,并 且 设 置 伪 元 素 内 容 的 样式 红色 。 
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还 可 以 将 :before 和 :after 伪 元 素 转 化 为 块 级 元 素 显示 ,例如 将 上 述 选 择 器 修改 如 
下 , 则 显示 效果 如 图 4-19 所 示 。 


Pp:before,p:after{content: "-- "7 color:red; display:block;} 


其 中 ,content 属性 一 定 要 设置 ,否则 伪 元 素 会 无 效 , 如 果 不 需要 伪 元 素 的 内 容 , 可 设置 
content 属性 值 为 空 , 即 content:""。 

content 属性 经 常 配合 attr() 函数 使 用 ,attr() 函数 用 来 获取 HTML 元 素 指定 属性 的 
值 ,例如 attr(title) 将 获取 元 素 title 属性 的 值 ,下 面 是 一 个 例子 ,显示 效果 如 图 4-20 所 示 。 


.Wcs:before{content:attr (title); color:#f£00; font-weight:bold;} 
<div class="wcs" title=" 第 5 部 分 :"> 王 船山 的 美学 思想 < /div> 
















ontent: a gjx 
KD | 外] 了 \ 同 Wizne 辐 | 
中 让 天 。 风 content 用 法 
-- 看 这 一 Ee 
看 这 一 段 文字 的 左右 第 5 部 分 。 四 
-- 这 一 段 文字 左右 -- 王 船山 的 美学 思想 可 





图 4-18 用 :before 和 :after 添加 伪 元 素 图 4-19 设置 伪 元 素 为 块 级 元 素 图 4-20 attr() 函 数 的 应 用 


利用 :after 产生 的 伪 元 素 , 可 以 作为 清除 浮动 的 元 素 , 即 对 浮动 盒子 的 父 元 素 设 置 ， 
after 产生 一 个 伪 元 素 , 用 这 个 伪 元 素来 清除 浮动 ,这 样 就 不 需要 在 浮动 元 素 后 添加 一 个 
空 元 素 了 ,也 能 实现 浮动 盒子 被 父 元 素 包 含 的 效果 ,具体 请 参考 5. 1. 3 节 。 

提示 : 

四 在 CSS3 中 为 了 区 分 伪 类 选择 器 和 伪 元 素 选 择 器 , 伪 元 素 选择 器 改 为 以 两 个 冒号 
开头 (如 ::after), 伪 类 选择 器 仍 使 用 一 个 冒号 (如 :hover) ,目前 较 新 的 浏览 器 都 能 识别 两 
种 写法 ,但 IE8 只 支持 单 冒 号 格式 ,所 以 为 了 兼容 IE8 还 是 写 单 冒号 好 些 。 

@ 目前 的 CSS 标准 还 不 支持 谋 套 伪 元 素 , 类 似 : :after: :after{} 的 写法 是 无 效 的 。 


3. CSS2. 1 选择 器 总 结 
下 面 将 常用 的 CSS2. 1 选择 器 列 在 表 4-4 中 ,请 读者 掌握 它们 的 用 法 。 
表 4-4 CSS2.1 常用 的 选择 器 


























选择 器 名 称 举 例 作用 范 
通 配 选择 符 闪 所 有 的 元 素 
标记 选择 器 div 所 有 div 标记 的 元 素 
div* div 标记 中 所 有 的 子 元 素 
后 代 选 择 器 div span 包含 在 div 标记 中 的 span 元 素 
div . class 包含 在 div 标记 中 类 名 属性 为 class 的 元 素 
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续 表 
选择 器 名 称 举 例 作用 范围 
并 集 选 择 器 div，span div 元 素 和 span 元 素 
子 选择 器 * div> span 如 果 span 元 素 是 div 元 素 的 直接 后 代 , 则 选中 span 元 素 
相 邻 选择 器 ” div 十 span 如 果 span 元 素 紧 跟 在 div 元 素 后 , 则 选中 span 元 素 
类 选择 器 .class 所 有 类 名 属性 为 class 的 元 素 
交集 选择 器 div. class 所 有 类 名 属性 为 class 的 div 元 素 
# itemid id 名 为 itemid 的 唯一 元 素 
id 选择 器 
div# itemid id 名 为 itemid 的 唯一 div 元 素 
a[attr] 具有 attr 属性 的 a 元 素 
属性 选择 器 * a[attr='x'] 具有 attr 属性 并 且 值 为 x 的 a 元 素 
a[attr~='x"] 具有 attr 属性 并 且 值 的 字符 中 含有 'x' 的 a 元素 
a:hover 所 有 在 hover 状态 下 的 a 元 素 
伪 类 选择 器 
a. class: hover 所 有 在 hover 状态 下 具有 class 类 名 的 a 元 素 
伪 元 素 选择 器 ” | div:first-letter 选中 div 元 素 中 的 第 一 个 字符 








4.4 CSS 设计 和 书写 技巧 * 
4.4.1 CSS 样式 总 体 设计 原则 


设计 CSS 样式 时 ,应 遵循 “ 先 普遍 ,后 特别 "的 原则 。 首 先 对 很 多 元 素 统一 设置 属性 ， 
然后 为 一 些 需要 特别 设置 样式 的 元 素 添 加 class 属性 或 id 属性 ,并 注意 如 下 几 点 。 

(1) 善于 运用 后 代 选 择 器 。 虽 然 定 义 标 记 选 择 器 最 方便 (不 需要 在 每 个 标记 中 添加 
class 或 id 属性 ,使 初学 者 最 喜欢 定义 标记 选择 器 或 由 标记 选择 器 组 成 的 后 代 选 择 器 )， 
但 有 些 标记 在 网 页 文档 的 各 部 分 出 现 的 含义 不 同 , 因 此 样式 风格 往往 也 不 相同 ,例如 网 页 
中 普通 的 文字 链接 和 导航 链接 的 样式 就 不 同 。 为 此 ,虽然 可 以 将 导航 条 内 的 各 个 二 a 二 标 
记 都 定义 为 同一 个 类 ,但 这 样 导 航 条 内 的 所 有 二 a 二 标记 都 要 添加 一 个 class 属性 ， 
class 一 "nav" 要 重复 写 很 多 遍 。 例 如 : 


<div> 
<a class="nav" href="#"> 首 页 </a> 
<a class="nav" href="#"> 中 心 简介 < /a>… 
<a class="nav" href="#"> 技 术 支 持 </a></div> 


实际 上 ,可 以 为 导航 条 内 二 a 二 标记 的 父 标记 (如 ul) 添加 一 个 id 属性 (nav) ,然后 用 
后 代 选 择 器 (#nav a) 就 可 以 选中 导航 条 内 的 各 个 二 a 二 标记 了 。 这 时 HTML 结构 代码 
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中 的 id 一 "nav" 就 只 需 写 一 次 了 ,示例 代码 (4-24. html) 如 下 ,显然 这 样 的 代码 更 简洁 。 


<div id="nav"> 
<a href="#"> 首 页 </a> 
<a href="#"> 中 心 简介 < /a>… 
<a href="#"> 技 术 支 持 </a>< /div> 


(2) 灵活 运用 class 和 id。 

例如 ,网 页 中 有 很 多 栏目 框 ,所 有 栏目 框 有 许多 样式 是 相同 的 ,因此 可 以 将 所 有 栏目 
框 都 定义 为 同一 个 类 ,然后 再 对 每 个 栏目 框 定义 一 个 id 属性 ,以 便 对 某 个 栏目 框 作 特 别 
的 样式 设置 。 

(3) 对 于 几 个 不 同 的 选择 器 ,如 果 它 们 有 一 些 共同 的 样式 声明 ,就 可 以 先 用 并 集 选 择 
器 进行 集体 声明 ,然后 单独 声明 某 些 元 素 的 特殊 样式 以 覆盖 前 面 的 样式 。 如 : 


h2,h3,h4,p, form,ul{fmargin:0;font- size:14px;} 
h2{font- size:18px;} 


4.4.2 DW 对 CSS 的 可 视 化 编辑 支持 


1. 新 建 和 编辑 CSS 样式 


DW 对 CSS 代码 的 新 建 和 编辑 有 很 好 的 支持 ,对 CSS 的 所 有 操作 都 集中 在 图 4-21 
所 示 的 “CSS 样式 ”面板 中 , 单 击 “ 新 建 ”( 辜 ) ,就 会 弹出 如 图 4-22 所 示 的 对 话 框 。 





图 4-22 新建 CSS 选择 器 
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其 中 ,“ 选 择 器 类 型 "中 的 “类 (可 应 用 于 任何 标签 )” 对 应 类 选择 器 ,“ 标 签 (重新 定义 特 
定 标签 的 外 观 )” 对 应 标记 选择 器 ,“ 高 级 ( 伪 类 选择 器 等 )” 对 应 除 此 之 外 的 其 他 所 有 选择 
器 (如 ID 选择 器 、 伪 类 选择 器 和 各 种 复合 选择 器 ) 。 确 定 选择 器 类 型 后 ,就 可 以 在 “名 称 ” 
下 拉 列 表 框 中 输入 或 选择 选择 器 的 名 称 (要 注意 符合 选择 器 的 命名 规范 , 即 类 选择 器 必须 
以 点 开头 ,ID 选择 器 必须 以 # 开头) ,在 “定义 在 ”选项 组 中 ,可 以 选择 将 CSS 代码 写 在 外 
部 CSS 文件 中 (如 style. css) ,并 通过 链接 式 引 入 该 CSS 文档 六 仅 对 该 文档 ?表示 使 用 入 
入 式 引 入 CSS, 即 把 CSS 代码 作为 二 style 二 标记 的 内 容 写 在 文档 头 部 。 

定义 好 选择 器 后 , 单 击 “ 确 定 " 按 钮 ,就 会 弹出 该 选择 器 的 CSS 属性 面板 ,如 图 4-23 所 
示 。 所 有 选择 器 的 CSS 属性 面板 都 是 相同 的 。 
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图 4-23 CSS 属 性 面板 


对 面板 中 的 任何 一 项 进行 赋值 后 ,都 等 价 于 向 该 选择 器 中 添加 一 条 声明 ,如 下 画 线 设 
置 为 “无 ”, 就 相当 于 在 代码 视图 内 为 该 选择 器 添加 了 一 条 "textrdecoration: none;”。 

设置 完 样式 属性 后 , 单 击 “ 应 用 ”按钮 ,可 以 在 设计 视图 中 看 到 样式 应 用 后 的 效果 ,也 
可 单 击 “ 确 定 ” 按 钮 ,将 关闭 规则 定义 面板 并 应 用 样式 。 这 时 在 “CSS 样式 ”面板 中 将 出 现 
刚才 新 建 的 CSS 选择 器 名 称 和 其 属性 ,如 图 4-21 所 示 。 


2. 将 嵌入 式 CSS 转换 为 外 部 CSS 文件 


如 果 在 HTML 文档 头 部 已 经 用 二 style 二 标记 添加 了 一 段 租 入 式 的 CSS 代码 , 则 可 
以 将 这 段 代 码 导 出 成 一 个 CSS 文件 供 多 个 HTML 文档 引用 。 导 出 方法 有 以 下 两 种 。 

(1) 执行 “文本 ”>“CSS 样式 ”>“ 导 出 ”菜单 命令 ,输入 文件 名 (如 style. css) ,就 可 将 
该 段 CSS 代码 导出 成 一 个 . css 文件 。 导 出 后 可 将 此 文档 中 的 二 style 二 标记 部 分 全 部 删 
除 ,然后 再 单 击 图 4-21 中 的 “附加 样式 表 ” 图 标 ( 畏 |) ,将 刚才 导出 的 . css 文件 引入 ,引入 
的 方法 可 选择 “链接 ”或 “导入 ”, 分 别 对 应 链接 式 CSS 或 导入 式 CSS。 

(2) 直接 复制 CSS 代码 。 在 DW 中 新 建 一 个 CSS 文 件 ,将 二 style 二 标记 中 的 所 有 样 
式 规则 (不 包括 二 style 二 标记 和 注释 符 ) 复 制 到 CSS 文档 中 ,然后 再 单 击 * 附 加 样式 表 ” 
( 较 ) 将 这 个 CSS 文 件 导 入 。 
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3. DW 对 CSS 样式 的 代码 提示 功能 


Dreamweaver 对 CSS 同样 具有 很 好 的 代码 提示 功能 。 在 代码 视图 中 编写 CSS 代码 
时 , 按 回 车 键 或 空格 键 都 可 以 触发 代码 提示 。 

编辑 CSS 代码 时 ,在 一 条 声明 书写 结束 的 地 方 按 回 车 键 ,就 会 弹出 该 选择 器 拥有 的 
所 有 CSS 属性 列表 供 选 择 , 如 图 4-24 所 示 。 当 在 属性 列表 框 中 已 选 定 某 个 CSS 属性 后 ， 
又 会 立刻 弹出 属性 值 列表 框 供 选择 ,如 图 4-25 所 示 。 如 果 属 性 值 是 颜色 , 则 会 弹出 颜色 
选取 框 ; 如 果 属 性 值 是 URL, 则 会 弹出 文件 选择 框 。 


























ER 1 
|® backerouna margin: Opx 20px 

backer float 

acker' IS inherit 

lS Vp I left 

</hds bucker ound-pe: (Snone 
| backeround-re iat 
I borde 
| borde: 

1 border-bottom-color /style> 
图 4-24 按 回 车 键 后 提示 属性 名 称 图 4-25 选择 名 称 后 提示 属性 值 


如 果 要 修改 某 个 CSS 属性 的 值 , 只 需 把 冒号 和 属性 值 删除 掉 , 然 后 输入 一 个 冒号 ,就 
又 会 弹出 如 图 4-25 所 示 的 属性 值 列表 框 来 。 

4. 快速 插入 div 等 布局 元 素 

一 般 情 况 下 ,需要 先 插入 HTML 元 素 ,再 对 元 素 设置 CSS 样式 。 执 行 “插入 ”一 “ 布 
局 对 象 ">“Div 标签 ”菜单 命令 ,将 弹出 如 图 4-26 所 示 的 对 话 框 , 单 击 “ 确 定 ” 按 钮 就 能 快 
速 插入 一 个 带 有 类 名 或 id 名 的 div 标记 了 。 





图 4-26 插入 Div 标 签 对 话 框 


5. 在 代码 视图 中 快速 新 建 选择 器 和 修改 选择 器 


在 代码 视图 中 ,如 果 将 光标 移动 到 某 个 HTML 元 素 的 标记 范围 内 ( 尖 括 号 内 ), 如 
图 4-27 所 示 ,再 单 击 如 图 4-21 所 示 的 “CSS 样式 ”面板 中 的 新建? 图标 罚 , 则 在 弹出 的 如 
图 4-28 所 示 的 “新 建 CSS 规则 ?面板 中 ,会 自动 为 光标 所 在 位 置 的 元 素 建立 选择 器 名 ,这 
样 可 免 去 手工 书写 该 CSS 选择 器 名 称 所 带 来 的 麻烦 。 

如 果 要 修改 某 个 CSS 选择 器 的 样式 ,可 将 光标 置 于 这 个 CSS 选择 器 的 代码 范围 内 ， 
再 单 击 如 图 4-21 所 示 的 “CSS 样式 ”面板 中 的 “编辑 ”图标 较 ,就 会 弹出 该 选择 器 的 属性 设 
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置 面板 ( 见 图 4-23) 供 修改 。 








《a href="#"><b> 政 策 法 规 人 /b></a: 定 | 
Ed er a "WE 





图 4-27 将 光标 置 于 标记 范围 内 图 4-28 新建 选择 器 时 会 自动 出 现 光标 位 置 的 元 素 


4.4.3 CSS 属性 的 值 和 单位 


值 是 对 属性 的 具体 描述 ,而 单位 是 值 的 基础 。 没 有 单位 ,浏览 器 将 不 知道 一 个 边框 是 
10cm 还 是 10px。CSS 中 较 复 杂 的 值 和 单位 有 颜色 取 值 和 长 度 单 位 。 


1. 颜色 的 值 

CSS 中 定义 颜色 的 值 可 使 用 命名 颜色 .rgb rgba 和 十 六 进 制 颜色 4 种 方法 。 
1) 命名 颜色 

例如 


p{color: red; } 


其 中 “red” 就 是 命名 颜色 ,能 够 被 CSS 识别 的 颜色 名 大 约 有 140 种 。 常 见 的 颜色 名 如 
red ,yellow blue,silver, Teal .White .navy、orchid ,oliver .purple、green 等 。 

2) rgb 颜色 

显示 器 的 成 像 原理 是 红 (Red)、 绿 (Green)、 蓝 (Blue) 三 色光 的 全 加 形成 各 种 各 样 的 
色彩 。 因 此 ,通过 设 定 RGB 三 色 的 值 来 描述 颜色 是 最 直接 的 方法 。 例 如 : 


1i{ color: rgb(139,31,185); } 
1i{ color: rgb(12%,201,50%); } 


其 值 可 以 取 0 一 255 的 整数 ,也 可 以 是 0 一 100% 的 百分数 ,但 Firefox 浏览 器 并 不 支 
持 百 分 数值 。 

3) rgba 颜色 

在 CSS3 中 ,新 增 了 支持 透明 度 的 rgba 颜色 值 ,rgba() 函 数 有 4 个 值 ,其 中 前 3 个 值 
代表 rgb 3 种 颜色 的 值 ,而 最 后 一 个 参数 a 是 Alpha 的 缩写 ,代表 透明 度 ,该 参数 的 取 值 
为 0 一 1, 其 中 0 表示 完全 透明 ,默认 值 1 表示 完全 不 透明 。 例 如 : 


div{background:rgba (240,0,0,0.3);} 


4) 十 六 进 制 颜色 
十 六 进 制 颜色 同样 是 基于 rgb 颜色 ,只 不 过 将 RGB 颜色 中 的 十 进 制 数 转换 成 了 十 六 





79 














《HTML5+CSS3 Web 前 端 开 发 》 


进 制 数 ,并 用 更 加 简单 的 方式 写 出 来 : # RRGGBB, 例 如 #ffcc33。 
其 参数 取 值 范围 为 00 一 FF( 对 应 十 进 制 仍 为 0 一 255) ,如果 每 个 参数 各 自在 两 位 上 
的 数值 相同 ,那么 该 值 也 可 缩写 成 “并 RGB 的 方式 。 例 如 ,#ffcc33 可 以 缩写 为 #fc3。 


2. CSS 长 度 单 位 


为 了 正确 显示 网 页 中 的 元 素 , 许 多 CSS 属性 都 依赖 于 长 度 。 所 有 长 度 都 可 以 为 正 数 
或 者 负数 加 上 一 个 单位 来 表示 ,而 长 度 单位 大 致 可 分 为 3 类 : 绝对 单位 、 相 对 单位 和 百 
分 比 。 
1) 绝对 单位 
绝对 单位 很 简单 ,包括 英寸 (in) 、 厘 米 (cm) 毫米 (mm) 、 磅 (pty) 和 pica(pc)。 
使 用 绝对 单位 定义 的 长 度 在 任何 显示 器 中 显示 的 大 小 都 是 相同 的 ,无 论 该 显示 器 的 
分 辩 率 或 尺寸 是 多 少 。 如 font-size:9pt, 则 该 文字 在 任何 显示 器 中 都 是 9pt 大 小 。 在 手 
机 网 页 中 ,由 于 不 同类 型 的 手机 分 辨 率 相差 很 大 ,应 尽量 使 用 绝对 单位 。 
2) 相对 单位 
顾名思义 ,相对 单位 的 长 短 取 决 于 某 个 参照 物 ,如 屏幕 的 分 辨 率 、 字 体高 度 等 。 
常用 的 相对 长 度 单位 有 父 元 素 的 字体 高 度 (em) 、 根 元 素 的 字体 高 度 (rem)、 字 母 x 的 
高 度 (ex) 和 像素 (px)。 
。 em 是 相对 于 父 元 素 字 体 大 小 的 比例 ,假设 某 个 div 的 字体 大 小 为 15px, 如 果 设 置 
该 div 的 子 元 素 字 体 大 小 为 2em, 则 子 元 素 的 实际 字体 大 小 为 30px。 

。，rem 是 相对 于 HTML 根 元 素 字体 大 小 的 比例 ,假设 定义 了 html {font-size: 
24px;} 或 150% ,设置 该 页 中 某 个 元 素 字 体 大 小 为 0. 5rem, 则 元 素 实 际 字体 大 小 
为 12px。 

。 ex 是 以 字体 中 小 写 x 字母 为 基准 的 单位 ,不 同 的 字体 有 不 同 的 x 高 度 , 因 此 即使 

font-size 相同 而 字体 不 同 的 话 ,1ex 的 高 度 也 会 不 同 。 

。 px 是 指 像素 , 即 显示 器 按 分 辨 率 分 割 得 到 的 小 点 。 显 示 器 由 于 分 辨 率 或 大 小 不 

同 ,像素 点 的 大 小 是 不 同 的 ,所 以 像素 也 是 相对 单位 。 

3) 百分比 

百分比 显得 非常 简单 ,也 可 看 成 是 一 个 相对 量 。 如 : 


td{ffont- size:12px; line-height: 160%; } ”/* 设 定 行 高 为 字体 高 度 的 160%*/ 
hr{ width: 80%} /* 水 平 线 宽度 相对 其 父 元 素 宽度 为 80%* / 


4.4.4 网 页 中 的 字体 


网 页 是 文字 的 载体 ,字体 的 使 用 是 网 页 设计 中 不 可 或 缺 的 一 部 分 。 为 了 网 页 的 美观 ， 
有 时 经 常 需要 使 用 一 些 特殊 的 字体 ,例如 : 


h2{font- family:" 方 正 姚 体 ", ' 幼 圆 ', "宋体 ";} 
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这 条 语句 的 作用 是 定义 h2 元 素 的 字体 是 方正 姚 体 ,但 前 提 是 网 页 浏览 者 的 系统 中 必 
须 安装 有 这 种 字体 ;如 果 没 安装 , 则 依次 定义 h2 的 字体 为 幼 圆 或 宋体 这 两 种 备用 字体 ;如 
果 都 没 安装 , 则 只 能 显示 系统 默认 字体 而 导致 字体 可 能 无 法 显示 。 

为 了 解决 由 于 浏览 者 系统 中 没有 安装 字体 导致 不 能 显示 的 问题 ,CSS3 提供 了 
@font-face 规则 。 利 用 这 种 规则 可 以 将 服务 器 端 字体 下 载 到 本 地 ,从 而 使 网 页 中 的 字体 
显示 摆脱 浏览 者 系统 中 字体 的 限制 。@font-face 规则 的 用 途 有 以 下 几 种 。 


1. 字体 文件 名 简写 
@font-face 可 以 为 字体 文件 名 定义 一 个 变量 ,例如 : 


@font-face { 
font- family: YT; /* 声明 一 个 名 为 YT 的 字体 变量 * / 
src:local ("方正 姚 体 "),1ocal (" 幼 圆 ") ,local ("宋体 "); 

} 


然后 在 任何 需要 使 用 YT 这 种 字体 时 就 可 以 使 用 如 下 这 种 简洁 的 写法 。 


h2{font- family:YT;} 


提示 

(1) 在 @font-face 规则 中 ,font-family 属性 的 作用 是 声明 字体 变量 ,与 普通 选择 器 中 
的 font-family 作用 明显 不 同 。 

(2) src 属性 定义 字体 的 下 载 地 址 ,其 值 可 以 是 local( 表 示 本 机 ) 或 url( 表 示 网 址 , 例 
如 要 使 用 服务 器 上 下 载 的 字体 )。 另 外 ,每 个 local() 或 url() 函 数 中 只 能 写 一 种 字体 。 

(3) 如 果 在 src 中 定义 了 多 个 字体 , 则 这 些 字体 之 间 也 是 候选 关系 。 

(4) 如 果 修改 了 src 中 定义 的 字体 或 顺序 , 则 一 定 要 关闭 浏览 器 再 打开 才能 看 到 修改 
后 的 效果 ,刷新 浏览 器 是 看 不 到 效果 的 。 


2. 使 用 服务 器 端 字体 


在 @font-face 规则 中 ,如 果 src 属性 定义 的 字体 是 一 个 url 路 径 , 则 网 页 加 载 时 会 自 
动 从 服务 器 下 载 字体 文件 ,再 显示 出 来 。 示 例 代 码 (4-25. html) 如 下 。 


@font-face { 
font- family: FZCYS; 
src: local ("FZYaSongS—-B-GB"), url ("fonts/FZCYS .woff2"), 
url ("fonts/FZCYS .woff") format ('woff'), url ("fonts/FZCYS.ttf");} 


这 表示 如 果 用 户 系 统 中 安装 了 方正 粗 雅 体 , 则 直接 使 用 ;如 果 没 安装 , 则 从 url 中 指 
定 的 路 径 下 载 该 字体 文件 再 使 用 。 本 例 中 的 路 径 是 网 站 目录 下 fonts 目录 中 的 文件 。 

提示 : 

(1) 网 络 字体 文件 主要 有 woff、svg、otf、eot 等 。 其 中 woff(Web Open Font Format) 
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字体 被 所 有 现代 浏览 器 支持 ,可 以 使 用 Font2Web 工具 将 普通 字体 文件 转换 成 woff 等 文 
件 格 式 。 

(2) 在 字体 文件 url 后 可 接 函 数 ,，format 函数 用 来 说 明 该 字体 文件 的 格式 ,以 帮助 浏 
览 器 识别 。 

(3) 必须 保证 url() 中 的 字体 文件 路 径 正确 ,url() 中 的 路 径 可 以 是 相对 url 或 绝 
对 url。 

(4) 对 于 中 文字 体 , 由 于 字体 文件 体积 很 大 ,可 以 使 用 WebFont 网 站 提供 的 生成 字 
体 服务 , 仅 输入 需要 的 文字 ,再 生成 字体 文件 ,这 样 字体 文件 的 体积 就 可 减少 很 多 。 


4.4.5 字体 图 标 技术 


网 页 中 经 常 需要 使 用 很 多 小 图 标 ,过 去 这 些 图 标 通常 是 图 片 文件 ,但 图 片 文件 的 体积 
较 大 ,制作 起 来 也 比较 烦琐 。 随 着 CSS3 技术 的 兴起 ,人 们 发 现 使 用 CSS3 的 某 些 特性 (如 
圆 角 渐变 等 ) 或 SVG 技术 能 绘制 出 各 种 各 样 的 图 标 。 于 是 有 人 结合 @font-face 技术 , 创 
立 了 字体 图 标 库 ,字体 图 标 库 能 使 用 字体 文件 生成 各 种 各 样 的 图 标 , 比 起 使 用 图 片 文件 ， 
可 大 大 减少 网 页 的 体积 。 目 前 比较 流行 的 字体 图 标 库 有 font-awesome 和 icomoon。 本 
季 以 icomoon 为 例 , 介 绍 如 何在 网 页 中 使 用 字体 图 标 。 

首先 进入 如 图 4-29 所 示 的 icomoon 的 网 址 https://icomoon. io/app/#/select。 在 
图 标 区 单 击 任意 图 标 即 可 选中 该 图 标 ( 可 同时 选中 很 多 个 图 标 , 再 次 单 击 则 取消 选中 ) 。 
选择 好 需要 的 图 标 之 后 , 单 击 图 4-29 右 下 角 的 Generate Font F 即 可 生成 图 标 字 体 文件 
并 转 到 下 载 页 面 , 在 下 载 页 面 单 击 Download 则 会 下 载 生成 的 字体 文件 。 
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图 4-29 icomoon 的 网 站 界面 


解压 下 载 的 字体 文件 ,将 fonts 目录 复制 到 网 站 的 根 目录 下 .在 需要 使 用 字体 图 标的 
网 页 中 加 入 如 下 CSS 代码 (4-26. html) 。 
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@font- face{ 
font- family: "myicon"; /x* 自 定义 的 字体 名 称 * / 
src: url ("fonts/icomoon.eot"); /* IE9 兼容 模式 * / 
src: url ("fonts/icomoon.eot") format ("embedded- opentype") 
/< 兼容 IE8*/ 
rurl("fonts/icomoon.woff") format ("woff") 
url ("fonts/icomoon.ttf")format ("truetype") 
url ("fonts/icomoon.svg")format ("svg"); 
font-weight: normal; font- style: normal; } 
-myicon{ 
font- family: "myicon"; 


font- style: normal; font-weight: normal; 


font- size: 32px; /* 设置 字体 图 标的 大 小 * / 
—webkit- font- smoothing: antialiased; /* 在 webkit 浏 览 器 中 有 抗 锯齿 效果 * / 
一 moz-osx- font- smoothing: grayscale; } 


然后 在 需要 显示 图 标的 地 方 插入 任意 一 个 HTML 元 素 , 本 例 中 为 二 二 ,设置 其 类 名 
为 CSS 中 定义 的 类 名 myicon ,并且 可 以 设置 字体 颜色 color 属性 来 修改 图 标的 颜色 ， 
例如 : 





<i style="color:#0fc;" class="myicon"> &#xe900;</i> 


这 样 就 会 在 网 页 中 显示 如 图 4-30 所 示 的 某 个 字体 图 标 了 。 


全 字体 图 标示 例 


图 4-30 字体 图 标示 例 


其 中 e900 为 该 图 标 序 号 的 十 六 进 制 编码 ,这 个 序号 可 以 在 下 载 的 压缩 文件 中 的 
demo. html 中 查找 到 ,而 网 页 中 规定 十 六 进 制 编码 要 在 它 的 前 面 添 加 “&# x” 前 级 和 *;” 
后 缀 ,所 以 就 是 *&#xe900;”。 

另外 一 种 方法 是 在 CSS 中 使 用 : :before 伪 元 素 插 入 该 图 标 序号 ,这 样 在 i 元 素 中 就 
: 写 图 标的 序号 了 ,代码 如 下 : 








.myicon:before{content: "\e900";} 


<i style="color:#900;" class="myicon"></i> 


如 果 希 望 在 鼠标 滑 过 时 ,字体 图 标 会 变色 ,可 以 在 i 元 素 的 外 面包 庄 一 个 超 链接 标 
记 , 然 后 使 用 hover 伪 类 选择 器 改变 i 元 素 的 字体 颜色 ,代码 如 下 : 


<a href="#"><i style="color:#0fc;" class="myicon icon-home"></i></a> 


a:hover i{ color: #f00 !important; } /* 通过 color 属性 修改 * / 
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4.5 盒子 模型 及 其 属性 


在 网 页 的 布局 和 页 面 元 素 的 表现 方面 .要 掌握 的 最 重要 的 概念 是 CSS 的 盒子 模型 
(Box Model) 以 及 盒子 在 浏览 器 中 的 排列 (定位 ) ,这 些 概念 用 来 控制 元 素 在 页 面 上 的 排 
列 和 显示 方式 ,形成 CSS 的 基本 布局 。 

设想 有 4 幅 镶 典 在 画 框 中 的 画 , 如 图 4-31 所 示 。 我 们 可 以 把 这 4 幅 画 看 成 是 4 个 
img 元 素 , 那 么 img 元 素 中 的 内 容 就 是 画 框 中 的 画 , 画 (内 容 ) 和 边框 之 间 的 距离 称 为 盒子 
的 填充 或 内 边 距 (padding) , 画 的 边框 称 为 盒子 的 边框 (border) , 画 的 边框 周围 还 有 一 层 
边界 (margin) ,用 来 控制 元 素 盒子 与 其 他 元 素 盒子 之 间 的 距离 。 





边框 
内 边框 





边界 











图 4-31 画 框 示意 图 


4.5.1 盒子 模型 概述 


通过 对 画 框 中 的 画 进行 抽象 ,就 得 到 一 个 抽象 的 模型 一 一 盒子 模型 ,如 图 4-32 所 示 。 
盒子 模型 是 CSS 的 基石 之 一 , 它 指定 元 素 如 何 显 示 以 及 (在 某 种 程度 上 ) 如 何 交 互 ,页 面 
上 的 每 个 元 素 都 被 浏览 器 看 成 是 一 个 矩形 的 盒子 ,这 个 盒子 由 元 素 的 内 容 、 填 充 ,边框 和 
边界 组 成 。 网 页 就 是 由 许多 个 盒子 通过 不 同 的 排列 方式 (上 下 排列 .左右 排列 ` 艇 套 排列 ) 
堆积 而 成 。 

盒子 的 概念 是 非常 容易 理解 的 ,但 是 如 果 要 精确 地 利用 盒子 模型 布局 ,有 时 候 1px 
都 不 能 够 差 ,这 就 需要 非常 精确 地 理解 盒子 大 小 的 计算 方法 。 盒 子 模型 的 填充 ,边框 ` 边 
界 宽度 都 可 以 通过 相应 的 属性 分 别 设置 上 、 右 、 下 、 左 4 个 距离 的 值 ,内 容 区 域 的 宽度 可 通 
过 width 和 height 属性 设置 ,增加 填充 .边框 和 边界 不 会 影响 内 容 区 域 的 尺寸 ,但 会 增加 
盒子 的 总 尺寸 。 
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padding-top: 


content 


padding-botom 


图 4-32 盒子 模型 及 有 关 属 性 


在 默认 情况 下 ,一 个 元 素 盒子 实际 占据 的 宽度 为 : 
实际 宽度 一 左 边界 十 左边 框 十 左 填充 十 内 容 宽度 十 右 填 充 十 右边 框 十 右边 界 
例如 ,一 个 div 元 素 的 CSS 样式 定义 如 下 。 








div{background: #9cf; 
margin: 20px; border: 10px solid #039; 
padding: 40px; width: 200px; height:88px;} 
<div> 盒 子 模型 < /div> 








则 该 元 素 占据 的 网 页 总 宽度 是 : 20 十 10 十 40 十 200 十 40 十 10 十 20 王 340(px) 。 其 中 ,该 元 
素 内 容 占据 的 宽度 是 200px, 高 度 是 88px。 

由 于 默认 情况 下 绝 大 多 数 元 素 的 盒子 边框 是 0, 盒子 的 背景 是 透明 的 ,所 以 在 不 设置 
CSS 样式 的 情况 下 元 素 的 盒子 不 可 见 , 但 这 些 盒子 依然 是 占据 网 页 空间 的 。 

通过 CSS 重新 定义 元 素 样式 ,包括 设置 元 素 盒子 的 margin、padding 和 border 的 宽 
度 值 ,还 可 以 设置 盒子 边框 和 背景 的 颜色 ,巧妙 设置 可 使 网 页 元 素 变 得 美观 生动 。 


4.5.2 边框 border 属性 


盒子 的 边框 具有 3 个 要 素 : 宽度 (粗细 )、 颜 色 和 样式 ( 线 型 )。 利 用 border 属性 可 同 
时 设置 边框 的 3 个 要 素 ,例如 .border: 1px solid red 表示 边框 为 1px 实 线 红色 。 

实际 上 ,border 属性 是 由 3 个 子 属 性 复合 而 成 ,分 别 是 borderwidth( 宽 度 ) border- 
color( 颜 色 ) 和 border-style( 样 式 ) 。 


1. 边框 样式 


这 里 重点 讲解 border-style 属性 , 它 的 属性 值 有 实 线 (solid) .虚线 (Cdashed) 、 点 线 
(dotted) 、 双 线 (double) 等 ,效果 如 图 4-33 所 示 。 

各 种 样式 边框 的 显示 效果 在 IE 和 Chrome 中 略 有 区 别 。 对 于 groove、inset、outset 
和 ridge 等 其 他 border-style 值 , 仅 有 Firefox 支持 。 下 面 是 图 4-33 对 应 的 代码 (4-27 
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* 


double 双 线 边框 


图 4-33 border-style 属性 不 同 取 值 在 IE 中 的 效果 


.html) 。 
divit 
border: 6px black; /* 设 置 边 框 为 6px 黑色 * / 
margin:6px; padding:6px; text-align:center; 


<div style="border- style:solid;">solid 实 线 边 框 < /div> 
<div style="border- style:dashed">dashed 虚线 边框 < /div> 
<div style="border- style:dotted">dotted 点 边框 < /div> 
<div style="border- style:double">double 双 线 边框 < /div> 


在 实际 中 ,也 可 以 单独 对 某 个 边框 设置 样式 ,下 面 的 代码 显示 效果 如 图 4-34 所 示 。 


.boxl{border: 4px solid red;} /* 同时 设置 4 个 边框 * / 
.box2{border-bottom: 6px double black; } /* 单 独 设置 下 边框 为 黑色 双 线 * / 
.box3{border:3px dotted #00f; 

border- right :none;} /* 设 置 右 边 无 边框 ,其 他 边框 为 虚线 * / 
.box4{border:5px dashed #666; 

border-width:0 5px; } /* 设置 上 下 无 边框 * / 





一 一 Sr E 
图 4-34 边框 样式 的 设置 效果 


提示 : 

(1) 当 有 多 条 规则 作用 于 同一 个 边框 时 , 则 后 面 设置 的 样式 会 覆盖 前 面 的 设置 。 

(2) border-width 的 属性 值 只 能 是 绝对 宽度 ,如 像素 ,不 能 为 百分比 等 相对 值 。 

(3) border-color 的 属性 值 除 了 颜色 外 ,还 可 以 是 transparent, 表 示 透 明 。 

实际 上 ,边框 border 属性 有 一 个 有 趣 的 特点 , 即 两 条 交汇 的 边框 之 间 是 一 个 斜 角 , 我 
们 可 以 通过 为 边框 设置 不 同 的 颜色 .再 利用 这 个 斜 角 ,制作 出 像 三 角形 一 样 的 效果 。 

例如 在 图 4-35 中 ,第 1 个 元 素 将 4 条 边框 设置 为 不 同 的 颜色 ,并 设置 为 10px 宽 , 此 
时 可 明显 地 看 到 边框 交汇 处 是 斜 角 ;第 2 个 元 素 在 第 1 个 元 素 基础 上 将 元 素 的 宽 和 高 设 
置 为 0, 并 且 没 有 内 容 , 这 样 4 条 边框 紧 挨 在 一 起 ,形成 4 个 三 角形 的 效果 。 
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A 


图 4-35 ”多 个 元 素 的 边框 交汇 时 的 效果 





第 3 个 元 素 只 有 2 条 边 ,第 4 个 元 素 有 3 条 边 ,也 是 利用 两 条 边 交汇 形成 三 角形 效 
果 , 第 3 个 元 素 将 左边 框 设 置 为 白色 (或 透明 ), 下 边框 设置 为 红色 (当然 也 可 设置 上 边框 
为 白色 ,右边 框 为 红色 ,效果 一 样 )。 第 4 个 元 素 将 左右 边框 设置 为 白色 ,下 边框 设置 为 红 
色 , 并 且 左 右边 框 宽度 是 下 边框 的 一 半 。 第 3 个 元 素 的 代码 (4-28. html) 实 现 如 下 。 


.delta{ height:0; width:0; 
border-bottom:50px solid red; border- left: 50px solid transparent;} 
<p class="delta"></p> 


2. border 属性 的 缩写 


边框 border 是 一 个 复杂 的 对 象 , 它 可 以 设置 4 条 边 的 不 同 宽度 ,不同 颜色 以 及 不 同 
样式 ,对 于 整个 属性 的 缩写 形式 如 下 : 


border: border-width | border- style | border- color 
例如 ,下 面 的 代码 将 所 有 div 元 素 的 4 条 边 均 设置 为 1px 宽 、 实 线 、 蓝 色 边 框 样式 。 
div{border : lpx solid blue;} 


border 属性 不 仅 可 以 对 整个 属性 进行 缩写 ,也 可 以 对 单个 边 进行 缩写 。 例 如 ,要 为 4 
条 边 定义 不 同 的 样式 , 则 可 以 如 下 缩写 : 


p{ border-width:lpx 2px 3px 4px; J 有 下 丰 六 7 
border- color:white blue red; 7* 上 左右 下 */ 
border- style: solid dashed; /* 上 下 左右 * /} 


如 果 要 单独 对 某 一 条 边 的 某 个 属性 进行 设置 , 则 可 以 这 样 写 : 


border- right- color:red; /* 设 置 右边 框 为 红色 x*/ 
border- top-width:4px; /* 设 置 上 边框 宽度 为 4pxx / 
4.5.3 圆 角 border-radius 属性 


默认 情况 下 ,元 素 的 盒子 是 一 个 矩形 。 而 在 网 页 设计 中 ,有 些 时 候 圆 角 或 圆 弧 显得 更 
加 美观 。 过 去 ,设计 师 为 了 实现 圆 角 效果 只 能 采用 把 圆 角 做 成 图 片 背 景 的 方法 。 
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为 了 使 圆 角 制作 更 加 方便 ,CSS3 提供 了 border-radius 属性 ,用 于 设置 元 素 盒 子 4 个 
角 的 圆 角 效果 。borderradius 属性 实际 上 是 在 矩形 的 4 个 角 上 分 别 做 内 切 圆 ,然后 通过 
设置 内 切 圆 的 半径 来 控制 圆 角 的 弧度 ,如 图 4-36 所 示 。 


top-left pa 垂直 半径 top-right 
水 平 半 径 
bottom-left bottom-right 


图 4-36 ”border-radius 圆 角 控制 原理 
border-radius 属性 的 语法 格式 如 下 : 


border-radius: 1~4 length | % /1~4 1ength | %; 


其 中 ,前 面 的 "1 一 4 指 的 是 水 平 半径 的 1 一 4 个 值 , 后 面 的 "1 一 4? 指 的 是 垂直 半径 的 1 一 4 
个 值 。 若 水 平 半 径 和 垂直 半径 相等 , 则 后 面 的 "1 一 4 可 省 略 , 例 如 : 


border- radius: 5px 10px 20px 40px; pos epee es ro a 

border- radius: 5px 10px 20px; /* 上 右 和 下 左 都 是 10px* / 

border- radius: 5px 10px; /* 上 左 和 下 右 是 5px, 上 右 和 下 左 是 10px* / 
border- radius: 10px; /* 4 个 角 的 半径 都 是 10px* / 


可 见 , 如 果 提 供 4 个 值 , 则 从 “上 左 " 开 始 按 顺 时 针 方 向 给 4 个 角 赋值 ,如 果 只 提供 
3 个 值 或 2 个 值 , 则 表示 省 略 角 的 值 与 其 对 角 线 上 角 的 值 相 等 。 
若水 平 半 径 和 垂直 半径 不 相等 , 则 写法 如 下 : 


border- radius: 20px 10px/40px 30px 20px 10px; 


表示 水 平 半径 中 ,上 左 和 下 右 是 20px, 上 右 和 下 左 是 10px; 垂直 半径 中 ,上 左 、 上 右 、 下 
右 、 下 左 分 别 是 40px、30px、20px、10px。 
border-radius 示例 程序 (4-29. html) 如 下 ,显示 效果 如 图 4-37 所 示 。 


div{ width: 100px; height: 200px; border: 50px solid #c00; display:inline-block; } 
.boxl{border- radius: 100px; } .box2{ border- radius: 100px 0; } 

.box3{ border- radius: 50%; } .box4{ border- radius: 0 50%50%0; } 
.box5{height:100px;border- radius: 100px; } 

<div class="boxl"></div>… <div class="box5"></div> 


注意 : border-radius 是 对 元 素 的 金子 设置 圆 角 ,而 不 是 边框 。 因 此 ,即使 元 素 无 边 
框 ,border-radius 也 能 对 元 素 的 盒子 产生 圆 角 效果 。 代 码 (4-30. html) 的 效果 如 图 4-38 
所 示 。 
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000Do 


图 4-37 ”border-radius 实例 效果 


div{ width: 100px; height: 100px; background:#C96; display:inline-block; } 
.boxl{border- radius: 100px; } .box2{ border- radius: 100px 0; } 

.box3{ height:50px;border- radius: 50%; } 

.box4{ border- radius: 50%; background:url (images/head01.jpg)no- repeat; 
background- size:cover; } 

.box5{height:50px;border- radius: 50px 50px 0 0; } 


OS Ga 图 


图 4-38 盒子 的 圆 角 效 果 


说 明 : 

(1) border-radius 的 值 不 能 是 负 值 ,因此 无 法 实现 内 凹 圆 角 效 果 。 

(2) 如 果 border-radius 的 值 比 元 素 的 宽度 或 高 度 还 大 的 话 , 则 会 等 比例 缩小 border- 
radius 的 值 。 例 如 ,假设 元 素 占据 宽度 是 200px, 高 度 是 300px, 设 置 border-radius 的 值 
为 300px, 则 首先 会 遵循 小 值 原理 ,由 于 元 素 的 宽度 值 较 小 ,因此 会 将 border-radius 水 平 
半径 缩放 到 200px; 再 根据 等 比例 原理 ,因为 当初 设置 时 是 300/300 ,也 就 是 1: 1 的 比例 ， 
因此 将 垂直 半径 也 缩放 到 200px, 于 是 ,最 后 得 到 的 是 一 个 200X200px 的 圆 弧 。 


4.5.4 图像 边框 border-image 属性 


在 版 面 设计 中 ,为 了 美观 ,经 常 需要 用 图 片 制 作 边框 (俗称 “花边 ”效果 )。 为 此 ,CSS3 
引入 了 border-image 属性 , 它 提供 了 一 种 应 用 装饰 性 边框 的 简单 方法 。 要 使 用 border- 
image, 首 先 需要 准备 好 用 于 border-image 的 图 片 , 例 如 ,要 制作 如 图 4-39 所 示 的 边框 , 则 
要 准备 一 张 如 图 4-40 所 示 的 源 图 片 。 





图 4-39 图 像 边 框 效果 图 4-40 需要 的 源 图 片 
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border-image 的 源 图 片 会 自动 被 两 横 两 竖 4 条 辅助 线 切 割 成 9 部 分 (俗称 九宫 格 ) 。 
4 条 辅助 线 的 位 置 由 其 slice 参数 决定 。 其 中 ,左上 \ 右 上 左下 \ 右 下 4 个 角 的 区 域 将 定位 
到 div 元 素 的 4 个 角 上 ,并 保持 不 变 。 而 左右 两 条 边 的 区 域 将 垂直 平 铺 (或 拉 伸 ) ,并 定 
位 到 div 元 素 的 左右 两 条 边 上 ,上 下 两 条 边 的 区 域 将 水 平平 铺 ( 或 拉 伸 ) ,并 定位 到 div 元 
素 的 上 下 两 条 边 上 。 

border-image 属性 的 语法 如 下 : 


border- image: source slice repeat; 


其 中 ,source 指定 所 用 图 像 的 url 地 址 ,slice 是 1 一 4 个 长 度 值 ( 或 百分比 值 ) ,其 取 值 类 似 
于 margin、padding 的 值 。slice 值 的 作用 是 设置 图 片 用 在 每 一 条 边 上 的 区 域 (距离 ), 从 而 
标记 出 要 用 在 元 素 边框 上 的 区 域 。repeat 值 可 以 是 一 个 或 两 个 关键 字 , 设 置 的 是 图 片 沿 
着 元 素 竖 直 (第 1 个 关键 字 ) 和 水 平方 向 (第 2 个 关键 字 ) 的 重复 方式 。 

repeat 的 取 值 有 以 下 4 种 。 

stretch: 默认 值 , 将 图 片 进行 拉 伸 以 填充 边框 的 长 ; 

repeat: 沿 着 边框 的 长 平 铺 图 片 ; 

round: 沿 着 边框 的 长 整数 次 平 铺 图 片 (元 素 可 能 被 自动 调整 大 小 以 适应 该 要 求 ); 

space: 也 是 沿 着 边框 的 长 整数 次 的 平 铺 图 片 ,但 如 果 图 片 不 能 填 满 元 素 , 则 使 用 空 
白 填 充 。 

border-image 的 示例 代码 (4-31. html) 如 下 ,运行 效果 如 图 4-41 所 示 。 由 于 使 用 的 源 
图 片 ( 见 图 4-40) 中 ,左上 、 右 上 、 左 下 、 右 下 4 个 角 的 区 域 宽 和 高 都 是 74px, 因 此 设置 slice 


参数 的 值 为 74。 
.delta{ height:60px; width:300px; 
border: 74px solid orange; /* 必须 先 设置 边框 和 图 像 边框 一 样 大 * / 
border- image:url (images/borderimg.jpg)74 repeat; } 
.delta pf margin:- 40px;} /*# 使 元素 向 外 伸展 到 父 元 素 的 边框 区 域 * / 


<div class="delta"><p> 图 像 边框 示例 …< /p>< /div> 


不 变 。 而 左 、 右 两 条 边 的 区 域 将 季 直 平 铺 《或 
站 他 到" 的 网 条 这 上 ， 上 下 两 条 
本 有 《或 拉 伸 





图 4-41 图 像 边框 的 效果 


可 见 , 用 border-image 制作 图 像 边框 时 ,如 果 边 框 的 4 个 角 区 域 太 大 ,就 会 导致 边框 
很 粗 , 若 希望 内 容 伸展 到 边框 区 域 , 则 可 以 设置 其 子 元 素 的 margin 为 负 值 。 
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4.5.5 padding 和 margin 属性 


padding 和 margin 属性 比较 简单 ,只 能 设置 宽度 值 , 最 多 分 别 对 上 、\ 右 、 下 \ 左 分 别 设 
置 宽度 值 , 例 如 ,padding-left:10px。 


1. padding 填充 属性 


padding 属性 (俗称 填充 或 内 边 距 )。 位 于 盒子 的 边框 和 内 容 之 间 , 和 表格 的 
cellpadding 属性 相似 。 如 果 填 充值 为 0, 则 盒子 的 边框 会 紧 挨 着 内 容 ( 见 图 4-42 左 ) ,这 
样 通常 不 美观 。 为 了 使 边框 和 内 容 之 间 有 一 些 间隙 ( 见 图 4-42 右 ), 就 需要 设置 padding 
值 不 为 0。 


badding 的 左上 角 为 基准 os 


点 在 盒子 中 平 铺 的 。 





图 4-42 ”padding 值 为 0( 左 ) 和 为 15px( 右 ) 时 元 素 的 效果 


当 对 盒子 设置 了 背景 颜色 或 背景 图 像 后 , 则 背景 会 覆盖 padding 和 内 容 组 成 的 区 域 ， 
并 且 默 认 情 况 下 背景 是 以 padding 的 左上 角 为 基准 点 在 元 素 盒子 中 平 铺 的 。 

padding 属性 值 可 以 是 像素 或 百分比 , 当 以 “%” 为 单位 时 则 是 以 父 元 素 的 width 为 基 
准 的 。 例 如 ,假设 下 面 代码 (4-32. html) 中 div 的 父 元 素 是 body 元 素 ,如 果 body 元 素 的 
宽 为 800px, 则 该 div 的 padding-left 值 为 80px。 


.qwe{width:300px; height:100px; padding- left:10%; border:2px solid red;} 
<div class="qwe"></div> 
2. margin 边界 属性 


margin 位 于 盒子 边框 的 外 侧 ,也 称 为 外 边 距 。 其 不 会 应 用 背景 ,因此 该 区 域 总 是 透 
明 的 。 通 过 设置 margin ,盒子 与 盒子 之 间 会 产生 一 定 的 间距 ,从 而 使 页 面 不 过 于 拥挤 。 
可 以 统一 设置 4 个 外 边 距 的 宽度 ,也 可 单独 设置 各 个 外 边 距 的 宽 。 例 如 : 


margin:4px 8px; /#* 上 下 4px, 左 右 8pxx / 
margin- left: -10px; /Vx 左 边界 -10pxx / 
3. 盒子 模型 属性 的 缩写 


CSS 属性 的 缩写 是 指 将 多 条 CSS 属性 集合 写 到 一 行 中 的 编写 方式 ,通过 对 盒子 模型 
属性 的 缩写 可 减少 CSS 代码 ,使 代码 更 清晰 。 对 于 margin、padding 和 border-width 的 宽 
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度 值 ,如 果 只 写 一 个 值 , 则 表示 4 个 方向 的 宽度 值 相等 ,例如 ,p{margin: 5px} 。 
如 果 给 出 了 2 个 、3 个 或 者 4 个 属性 值 ,它们 的 含义 将 有 所 区 别 , 具 体 如 下 。 
(1) 如 果 给 出 2 个 属性 值 , 前 者 表示 上 下 边 距 的 宽度 ,后 者 表示 左右 边框 的 宽度 ; 
(2) 如 果 给 出 3 个 属性 值 .那么 前 者 表示 上 边 距 的 宽度 ,中 间 的 数值 表示 左右 边框 的 
宽度 ,后 者 表示 下 边 距 的 宽度 ; 
(3) 如 果 给 出 4 个 属性 值 , 那 么 依次 表示 上 ` 右 、 下 ,左边 距 的 宽度 , 即 按 顺 时 针 排 序 。 


4. 盒子 模型 其 他 需 注意 的 问题 


关于 盒子 模型 ,还 有 以 下 几 点 需要 注意 。 

(1) 边界 margin 值 可 为 负 , 如 margin: 一 480px, 填 充 padding 值 不 可 为 负 。 

(2) 如 果 盒 子 中 没有 内 容 ( 即 空 元 素 , 如 二 div 二 一/div 之 ) ,对 它 设置 的 宽度 或 高 度 为 
百分比 单位 (如 width: 30%%) ,而 且 没 有 设置 border、padding 或 margin 值 , 则 盒子 不 会 被 
显示 ,也 不 会 占据 空间 ,但 是 如 果 对 空 元 素 的 盒子 设置 的 宽 或 高 是 像素 值 的 话 , 盒 子 会 按 
照 指 定 的 像素 值 大 小 显示 。 

(3) 对 于 IE6 浏览 器 ,如 果 网 页 头 部 没有 定义 文档 类 型 声明 DOCTYPE ,或 定义 不 正 
确 (最 常见 的 是 DOCTYPE 没有 项 格 写 在 文档 的 第 一 行 ) ,那么 IE6 将 进入 怪异 (quirk) 模 
式 , 此 时 盒子 的 宽度 width 或 高 度 height 等 于 原来 的 宽度 或 高 度 再 加 上 填充 值 和 边框 
值 。 因 此 ,在 使 用 了 盒子 模型 属性 后 一 定 要 有 文档 类 型 声明 。 


5. 各 种 元 素 盒子 模型 属性 的 浏览 器 默认 值 


所 谓 浏览 器 的 默认 样式 ,就 是 指 不 设置 任何 CSS 样式 的 情况 下 浏览 器 对 元 素 样式 的 
定义 ,例如 ,对 于 标题 元 素 , 浏 览 器 默认 会 以 粗 体 的 形式 显示 ,用 户 编写 CSS 样式 实际 上 
就 是 覆盖 浏览 器 对 元 素 默认 的 样式 定义 。 各 种 元 素 的 浏览 器 的 默认 样式 如 下 。 

(1) 绝 大 多 数 html 元 素 的 margin .padding 和 border 属性 浏览 器 默认 值 为 0。 

(2) 有 少数 html 元 素 的 margin 和 padding 浏览 器 默认 值 不 为 0。 主 要 有 body、hl 一 
h6 .pul\li\form 等 ,因此 有 时 必须 重新 定义 它们 的 这 些 属性 值 为 0。 

(3) 表单 中 大 部 分 input 元 素 ( 如 文本 框 、 按 钮 ) 的 边框 属性 默认 不 为 0, 有 时 可 以 对 
input 元 素 边 框 值 进行 重新 定义 达到 美化 表单 中 文本 框 和 按钮 的 目的 。 


4.6 标准 流下 的 定位 及 应 用 


CSS 中 有 3 种 定位 机 制 , 即 标准 流 (normal flow) 浮动 (float) 和 定位 (position) 属 性 
下 的 定位 。 除 非 设 置 了 浮动 属性 或 定位 属性 ,所 有 元 素 默 认 都 是 在 标准 流 中 定位 的 。 


4.6.1 标准 流下 的 定位 原则 


顾名思义 ,标准 流 中 元 素 盒子 的 位 置 由 元 素 在 HTML 文档 中 的 位 置 决定 。 也 就 是 
说 ,在 文档 前 面 出 现 的 元 素 一 定 会 排 在 后 面 出 现 的 元 素 的 前 面 。 具 体 是 : 
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(1) 行内 元 素 的 盒子 在 同一 行 中 从 左 至 右 水 平 排列 。 

(2) 块 级 元 素 的 盒子 占据 一 整 行 ,从 上 到 下 一 个 接 一 个 排列 。 

(3) 对 于 嵌 套 的 元 素 , 子 元 素 的 盒子 位 于 父 元 素 盒子 的 里 面 ,并 且 释 放 在 父 元 素 的 
| ep 

(4) 盒子 与 盒子 之 间 的 距离 由 margin 属性 决定 。 盒 子 与 内 容 之 间 的 距离 由 padding 
属性 决定 。 

(5) 在 HTML 代码 中 添加 一 个 元 素 就 是 向 浏览 器 中 插入 了 一 个 盒子 。 

例如 ,下 列 代码 (4-33. html) 中 有 一 些 行内 元 素 和 块 级 元 素 , 其 中 块 级 元 素 p 还 符 套 
在 div 块 内 。 下 面 采用 * * ”通配符 让 页 面 所 有 元 素 呈 现 * 盒 子 ”, 效 果 如 图 4-43 所 示 。 


<html><head> 

<style> 

* {border: 2px dashed #F06; padding: 6px; margin: 2px;} 

body{ border: 3px solid blue;} 

a{ border: 3px solid blue;} 

</style>< /head> 

<body> 

<div> 网 页 的 banner ( 块 级 元 素 )< /div> 

<a href="#"> 行 内 元 素 1< /a><a href="#"> 行 内 2< /a><a href="#"> 行 内 3< /a> 
<div> 这 是 无 名 块 <p> 这 是 盒子 中 的 盒子 </p></div></body></html> 


) 含 子 在 标准 流下 的 定位 一 we 和 | 








图 4-43 盒子 在 标准 流下 的 定位 


在 图 4-43 中 ,最 外 面 的 虚线 框 是 html 元 素 的 盒子 ,里 面 的 一 个 实 线 框 是 body 元 素 
的 盒子 。 在 body 中 ,包括 两 个 块 级 元 素 div( 从 上 到 下 排列 ) 和 三 个 行内 元 素 a( 从 左 到 右 
并 列 排列 ) ,还 有 一 个 p 元 素 盒 子 骨 套 在 div 盒子 中 ,所 有 盒子 之 间 的 距离 由 margin 和 
padding 值 控制 。 


1. 行内 元 素 的 盒子 


行内 元 素 的 盒子 只 能 在 浏览 器 中 得 到 一 行 高 度 的 空间 ( 行 高 由 line-height 属性 决 
定 , 如 果 未 设置 该 属性 , 则 是 内 容 的 默认 高 度 ) ,如 果 给 它 设置 上 下 border、 margin、 
padding 等 值 , 导 致 其 盒子 的 高 度 超过 行 高 ,那么 盒子 上 下 部 分 将 和 其 他 元 素 的 盒子 重 
笃 , 如 图 4-43 所 示 。 
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从 图 4-44 可 以 看 出 , 当 增 加 a 元 素 的 边框 和 填充 值 时 ,行内 元 素 a 占据 的 浏览 器 高 
度 并 没有 增加 ,下 面 这 个 div 块 仍然 在 原来 的 位 置 , 导 致 行内 元 素 盒子 的 上 下 部 分 和 其 他 
元 素 的 盒子 发 生 重生 (此 时 a 元素 的 盒子 将 释放 在 其 他 盒子 上 方 ) ,而 左右 部 分 不 会 受 影 
响 。 因 此 ,不 推荐 对 行内 元 素 直接 设置 盒子 属性 ,一 般 先 设置 行内 元 素 以 块 级 元 素 显示 ， 
再 对 它 设 置 盒子 属性 。 








图 4-44 增 大 a 元 素 高 度 后 的 效果 


2. display 属性 


实际 上 ,标准 流 中 的 元 素 可 通过 display 属性 来 改变 元 素 是 以 行内 元 素 显示 还 是 以 块 
级 元 素 显示 ,或 不 显示 。display 属性 的 常用 取 值 及 其 含义 如 下 : 


display: block | inline | none | list-item| inline-block | flex 


(1) 块 级 元 素 (display: block) 。 

每 个 元 素 占据 浏览 器 一 整 行 的 位 置 ,元 素 之 间 自 动 换行 ,从 上 到 下 依次 排列 。 

(2) 行内 元 素 (display: inline) 。 

行内 (inline) 元 素 是 指 元 素 与 元 素 之 间 从 左 到 右 水 平 排列 ,只 有 当 浏 览 器 窗口 容纳 不 
下 才 会 转 到 下 一 行 ,每 个 元 素 的 宽度 以 容纳 内 容 的 最 小 宽度 为 准 , 对 行内 元 素 设 置 
width .height、 上 下 margin、 上 下 padding 属性 均 不 能 增加 其 占有 的 空间 ,但 可 设置 line- 
height ,左右 margin 左右 padding。 

(3) 行内 块 元 素 (display: inline-block) 。 

行内 块 元 素 将 在 一 行内 水 平 排列 ,但 每 个 元 素 又 具有 块 级 元 素 的 特点 ,设置 width、 
height、margin、padding 等 属性 均 有 效 , 也 就 是 结合 了 行内 元 素 和 块 级 元 素 的 特点 。 

(4) 隐藏 元 素 (display:none) 。 

当 某 个 元 素 被 设置 成 display:none 之 后 ,浏览 器 会 完全 忽略 掉 这 个 元 素 ,该 元 素 将 不 
会 被 显示 ,也 不 会 占据 文档 中 的 位 置 。 像 title 元 素 默 认 就 是 此 类 型 。 在 制作 下 拉 菜 单 、 
Tab 面板 时 就 需要 用 display: none 把 未 激活 的 菜单 或 面板 隐藏 起 来 。 

提示 : 使 用 visibility: hidden 也 可 以 隐藏 元 素 ,但 元 素 仍 然 会 占据 文档 中 原来 的 
位 置 。 

(5) 列表 项 元 素 (display:listitem) 。 

在 html 中 只 有 1i 元 素 默 认 是 此 类 型 ,将 元 素 设 置 为 列表 项 元 素 并 设置 它 的 列表 样式 
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后 ,元 素 左边 将 增加 列表 图 标 ( 如 小 黑 点 ) 。 
修改 元 素 的 display 属性 一 般 有 以 下 用 途 。 
(1) 对 行内 元 素 设置 宽度 和 高 度 , 或 者 让 行内 元 素 从 上 到 下 排列 (如 制作 垂直 导航 
条 ) ,这 时 需 将 行内 元 素 转换 为 块 级 元 素 显 示 (display:block) 。 
(2) 使 块 级 元 素 从 左 到 右 依 次 排列 ,可 设置 (display: inline-block) 或 者 浮动 属性 。 
(3) 控制 元 素 的 显示 和 隐藏 ,如 下 拉 菜 单 、 提 示 框 ,Tab 面板 中 的 元 素 ,隐藏 时 需 设 置 


display:none。 
4.6.2 ”margin 合并 现象 


1. 上 下 margin 合并 问题 


上 下 margin 合并 是 指 当 两 个 块 级 元 素 上 下 排列 时 ,它们 之 间 的 边界 (margin) 将 发 生 
合并 ,也 就 是 说 ,两 个 盒子 边框 之 间 的 距离 等 于 这 两 个 盒子 margin 值 的 较 大 者 。 如 
图 4-45 所 示 ,浏览 器 中 两 个 块 元 素 将 会 由 于 margin 合并 而 按 图 4-45 右 图 方式 显示 。 

合并 之 前 合并 之 后 


| margin-top:10px 块 级 元 素 2 
块 级 元 素 2 3 Ls 
EF ! 









上 下 外 边 距 合并 成 
-个 外 边 距 















图 4-45 上 下 margin 合 并 


元 素 上 下 margin 合并 的 一 个 例子 是 由 几 个 段落 (p 元 素 ) 组 成 的 典型 文本 页 面 ,第 一 
个 p 元 素 上 面 的 空白 等 于 段落 p 和 段落 p 之 间 的 空白 宽度 。 这 说 明了 段落 之 间 的 上 下 
margin 发 生 了 合并 ,从 而 使 段落 各 处 的 距离 相等 了 。 


2. 父子 元 素 margin 合并 问题 


当 一 个 元 素 包 含 在 其 父 元 素 中 时 , 若 父 元 素 的 边框 和 填充 为 0, 此 时 父 元 素 和 子 元 素 
的 margin 挨 在 一 起 ,那么 父 元 素 的 上 下 margin 会 和 子 元 素 的 上 下 margin 发 生 合并 ,但 


是 左右 margin 不 会 发 生 合并 现象 ,如 图 4-46 所 示 。 
合并 之 前 合并 之 后 


内 外 边 距 合 并 
成 一 个 外 边 距 





图 4-46 ”父子 元 素 空白 边 合并 
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下 面 是 一 个 上 下 margin 合并 的 例子 (4-34. html) , 它 的 显示 效果 如 图 4-47 所 示 。 


#inner { 
margin: 30px; border: lpx solid #F00; 
height: 50px; width: 200px; background- color: #9CF;} 


#outer {margin: 20px;} /* 父 元 素 只 设置 了 边界 ,未 设置 边框 和 填充 * / 
body {margin: 10px;} 
<body> 

<div id="outer"><div id="inner"> 此 处 显示 id "inner" 的 内 容 < /div>< /div> 
< /body> 


在 图 4-47 中 ,由 于 父 元 素 没有 设置 边框 和 填充 值 ,使 父 元 素 和 子 元 素 的 上 下 margin 
发 生 了 合并 ,而 左右 margin 并 未 合并 。 如 果 有 多 个 父 元 素 的 边框 和 填充 值 都 为 0, 那么 
子 元 素 会 和 多 个 父 元 素 的 上 下 margin 发 生 合并 。 因 此 上 例 中 ,上 margin 等 于 # inner、 
#outer\body 这 3 个 元 素 上 margin 的 最 大 值 30px。 

若 父 元 素 的 边框 或 填充 不 为 0, 或 父 元 素 中 还 有 其 他 内 容 , 那 么 父 元 素 和 子 元 素 的 
margin 会 被 分 隔 开 , 因 此 不 存在 margin 合并 的 问题 。 

提示 : 如 果 有 人 金子 谋 套 ,要 调整 外 面 念 子 和 里 面 侈 子 之 间 的 距离 ,尽量 用 外 面 僵 子 的 
padding 来 调整 ,不 要 用 里 面 鲍 子 的 margin, 以 避免 父子 元 素 上 下 margin 合并 现象 的 
发 生 ; 


3. 左右 margin 不 会 合 


元 素 的 左右 margin 等 于 相 邻 两 边 的 margin 之 和 ,不 会 发 生 合并 ,如 图 4-48 所 示 。 





) 父子 元 素 空白 边 要 加 = WSI 


























EEC 让 有 本 margin-right margin-left 
60px span 1 span 2 
图 4-47 父子 元 素 上 下 空白 边 释 加 图 图 4-48 行内 元 素 的 左右 margin 不 会 合并 


4.6.3 盒子 模型 的 应 用 

利用 盒子 模型 的 相关 属性 ,可 以 为 网 页 中 的 任何 元 素 添加 填充 .边框 和 背景 等 效果 ， 
只 要 运用 得 当 , 能 很 方便 地 美化 网 页 元 素 。 下 面 是 两 个 盒子 模型 属性 应 用 的 实例 。 

1. 制作 日 历 效 果 


图 4-49 是 网 页 中 某 些 通知 或 学 术 讲座 栏目 中 常见 的 日 历 效果 。 从 结构 上 看 ,日 期 和 
月 份 是 上 下 排列 的 两 个 元 素 。 为 了 让 这 两 个 元 素 组 成 一 个 整体 ,可 以 在 外 面 再 套 一 个 div 
元 素 。 因 此 该 日 历 由 3 个 HTML 元 素 组 成 ,结构 代码 (4-35. html) 如 下 。 
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<div class="news date"> <!-- 表 示 日 历 整体 --> 
<div class= "news day">27 </div> 
<div class="news month">2017-06 </div> 


</div> 


接 下 来 设置 CSS 样式 ,主要 是 要 为 外 层 news_date 元 素 添加 边框 和 宽度 。 为 内 层 两 
个 元 素 设置 字体 颜色 .背景 颜色 和 行 高 。 代 码 如 下 。 


-news_date { 
width: 50px; text-align: center; 
border: lpx solid #d26d22;} 
-news day { 
line-height: 30px; font- size: 18px; 
background: #d26d22; color: #fff;} 
-news_ month { 
line-height: 18px; font- size: 10px; 
background: #fff; color: #d26d22;} 


2 


2017-06 


图 4-49 日 历 效果 





提示 : 设置 元 素 的 height 和 line-height 属性 为 同一 值 时 ,将 使 元 素 中 的 内 容重 直 居 
中 显示 。 例 如 “line-height: 30px; height: 30px;”。 此 时 ,height 属性 可 以 省 略 。 本 例 
中 ,就 将 . news_day 和 . news_month 中 的 height 属性 省 略 了 ,仍然 能 垂直 居中 。 

2. 制作 留言 评论 界面 

图 4-50 是 一 个 留言 评论 界面 ,从 表面 上 看 ,该 界面 似乎 是 由 左右 两 个 盒子 组 成 。 而 
实际 上 ,这 两 个 盒子 是 包含 关系 ,左边 的 盒子 本 来 位 于 右边 盒子 里 面 , 再 通过 负 值 margin 
将 其 强行 拖 动 到 其 父 元 素 的 外 面 。 结 构 代 码 (4-36. html) 如 下 。 

<div class="weibo"> 

<div class="intro"></div> 


<p class="txt"> 王 小 波 曾 经 说 过 ,大 多 数 人 …< /p> 


</div> 


CSS 样式 代码 如 下 。 
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王 小 沪 曾经 说 过 ， 大 多 数 人 在 说 话 ， 少 数 人 在 沉默 ， 大 多 数 人 
四 -中 幸福 ， 少 数 人 痛苦 。 所以， 我 经 各 所 的 项 天 儿 办 大 
站 数 ， 可 是 我 失败 了 。 我 是 一 个 与 众 不 同 的 人 ， 自 始 至 终 部 是 一 
人 个 的 人 ， a 


4-50 留言 评论 界面 


.weibo{font- size:14px; width:40%;margin- left:90px; background- color: 

#EEF7FF; border:1lpx solid #CCC; } 

.intro{margin- left:- 90px; padding:5px; width:60px; height :60px; 

background: url (images/tx]1.jpg)no- repeat; border: lpx solid #CCC; line- height:1. 
G6em; } 


.txt{margin- top:- 60px;} /* 将 文本 拖 动 到 原来 位 置 的 上 方 * / 


可 见 , 通 过 负 margin, 子 元 素 可 以 跳出 父 元 素 边框 的 范 
围 , 使 其 看 起 来 不 像 子 元 素 。 


3. 制作 坚 直 导航 菜单 


利用 盒子 模型 及 其 在 标准 流 中 的 定位 方式 ,就 可 以 制作 出 
无 需 表 格 的 竖 直 菜单 ,原理 是 通过 将 a 元 素 设置 为 块 级 元 素 显 
示 , 并 设置 它 的 宽度 ,再 添加 填充 、 边 框 和 边 距 等 属性 实现 的 。 轩 寅 证 汪 
当 鼠 标 滑 过 时 改变 它 的 背景 和 文字 颜色 以 实现 动态 交互 。 代 。 图 4-51 竖 直 导航 菜单 
码 (4-37. html) 如 下 ,效果 如 图 4-51 所 示 。 


首页 


中 心 简介 





#nav{width:217px;} 
#nava { 
font- size: 16px; color: #fcfcfc; 
text- decoration: none; 
background- color: #14a69a; 
display: block; 
border-bottom: lpx solid #0e746b; 
padding- left: 20px; 
line-height: 35px; 
margin: 0 2px; } 
#nav a:hover { 
color: #fff; background- color: #0e746b; /* 改变 字体 色 和 背景 色 * / 
border- left: 5px solid #fbb03b; } /* 添加 左边 黄色 边框 */ 
<div id="nav"> 
<a href= "#"> 首 页 </a><a href="#"> 中 心 简介 < /a>… 
<a href="#"> 为 您 服务 </a><a href="#"> 技 术 支 持 和 服务 </a> 


</div> 





98 











CSS 样式 美化 


4.6.4 Chrome 浏览 器 的 CSS 调试 功能 


在 制作 网 页 时 ,需要 对 每 个 元 素 的 大 小 和 位 置 有 清晰 直观 的 了 解 ,以 帮助 开发 者 对 元 
素 进行 定位 ,以 及 检查 元 素 应 用 了 哪些 样式 。 以 便 对 元 素 显 示 的 效果 进行 分 析 。Chrome 
浏览 器 提供 了 网 页 的 调试 功能 ,在 浏览 器 窗口 中 右 击 ,选择 快捷 菜单 中 的 “检查 ”命令 ,将 
出 现 如 图 4-52 所 示 的 窗口 。 





民 名 | Bements Console Sources Network » :x 





<html xmlns="http://wew.w3.org/1999/xhtml”> <^ 


<head>-</head> 






boxl paddinef 
lpaddingg9 左 上 角 








RE 
div. boxl1 216p: 
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图 4-52 Chrome 的 网 页 调试 界面 


用 鼠标 在 窗口 右上 方 的 HTML 代码 中 滑动 ,每 滑动 到 一 个 元 素 上 时 ,就 会 以 半 透 明 
背景 显示 该 元 素 占据 的 网 页 空间 ,并 以 不 同 颜色 标识 出 元 素 的 margin、border、padding、 
内 容 等 区 域 。 窗 口 的 右 下 方 还 会 显示 该 元 素 的 盒子 模型 图 。 

窗口 的 中 下 方 会 显示 元 素 应 用 的 CSS 代码 ,从 上 到 下 按照 优先 级 依次 是 行内 样式 、 
选择 器 样式 、 浏 览 器 默认 样式 继承 的 样式 。 在 此 ,用 户 可 以 清楚 地 看 到 元 素 成 功 地 应 用 
了 哪些 样式 ,而 被 划 掉 的 样式 可 能 是 如 下 情况 : 样式 冲突 ,优先 级 较 低 的 样式 被 去 掉 ; 样 
式 书写 错误 ,无 法 识别 ;样式 被 注释 掉 了 。 

而 且 , 用 户 还 可 对 图 4-52 中 的 HTML 代码 和 CSS 代码 做 调试 修改 ,此 时 网 页 马上 
会 显示 修改 后 的 效果 。 

在 仿 站 (模仿 其 他 网 站 ) 中 ,使 用 浏览 器 的 调试 功能 能 方便 地 抽取 需要 的 网 页 元 素 , 因 
为 一 个 网 页 的 代码 分 为 两 部 分 : HTML 代码 或 CSS 代码 ,它们 位 于 网 页 的 不 同 部 分 ,如 
果 直 接 保存 网 页 ,只 能 保存 网 页 的 HTML 代码 ,虽然 从 HTML 代码 中 找到 特定 网 页 元 
素 的 代码 是 比较 容易 的 ,但 是 从 CSS 文档 中 去 找 特定 网 页 元 素 的 所 有 样式 是 非常 困难 
的 。 而 使 用 浏览 器 调试 功能 ,网 页 元 素 所 有 的 CSS 样式 都 显示 在 一 起 ,可 以 方便 地 复制 。 
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提示 : 在 图 4-52 中 , 单 击 选中 某 个 HTML 元 素 后 ,在 其 右键 快捷 菜单 中 选择 
Copy 一 Copy outerHTML 命令 能 复制 元 素 的 HTML 代码 。 在 右键 快捷 菜单 中 选择 “; 
hover” 命 令 , 能 查看 该 元 素 的 “:hover” 伪 类 样式 代码 。 


4.7 ”背景 的 运用 


背景 (background) 是 网 页 中 常用 的 一 种 表现 方法 ,无 论 是 背景 颜色 还 是 背景 图 片 ,只 
要 灵活 运用 都 能 为 网 页 带 来 丰富 的 视觉 效果 。 


4.7.1 CSS 的 背景 属性 


在 HTML 发 展 早期 ,HTML 元 素 可 使 用 bgcolor 和 backgroud 等 HTML 属性 设置 
背景 颜色 和 背景 图 片 ,但 形式 比较 单一 。 对 背景 图 片 的 设 定 , 只 支持 在 X、Y 轴 都 平 铺 的 
方式 。 因 此 ,如 果 同 时 设置 背景 颜色 和 背景 图 片 , 而 背景 图 片 又 不 透明 ,那么 背景 颜色 将 
被 背景 图 片 完全 挡住 ,只 显示 背景 图 片 。 

CSS 对 元 素 的 背景 设置 , 则 提供 了 更 多 的 途径 ,如 背景 图 片 既 可 以 平 铺 也 可 以 不 平 
铺 , 还 可 以 仅 在 X 轴 平 铺 或 仅 在 Y 轴 平 铺 ; 当 背景 图 片 不 平 铺 时 ,并 不 会 完全 挡住 背景 颜 
色 , 因 此 可 以 同时 设置 背景 颜色 和 背景 图 片 将 两 者 融合 在 一 起 。 

CSS 的 背景 属性 是 backgroud, 或 以 “backgroud- 开 头 ”, 表 4-5 列 出 了 CSS2. 1 中 的 背 














景 属性 及 其 可 能 的 取 值 。 
表 4-5 CSS2.1 的 背景 属性 及 其 取 值 
属 性 描述 可 用 什 
background 设置 背景 的 所 有 控制 选项 其 他 背景 属性 可 用 值 的 集合 
background-color 设置 背景 颜色 命名 颜色 十 六 进 制 颜色 等 
background-image 设置 背景 图 片 或 渐变 填充 url(URL) 或 源 变 属性 什 
background-repeat 设置 背景 图 片 的 平 铺 方式 的 


Tepeat-y、no-repeat 
background-attachment 设置 背景 图 片 固 定 还 是 随 内 容 滚 动 scroll .fixed 
设置 背景 图 片 显示 的 起 始 位 置 (第 | [left | center | right] [top | 


background-position 1 个 值 为 水 平 位 置 ,第 2 个 值 为 竖 直 | center | bottom] 或 [x%] [y%] 
位 置 ) 或 [x-pos] [y-pos] 

















1. background 属性 的 缩写 
background 属性 是 表 4-5 中 其 他 背景 属性 的 缩写 ,其 缩写 顺序 为 : 


background: background- color | background- image | background- repeat | background 
一 attachment | background-position 
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例如 : 
body {background:silver url (images/bg.jpg)repeat— x fixed 50%50%;} 


可 以 省 略 其 中 一 个 或 多 个 属性 值 ,如 省 略 , 则 该 属性 将 使 用 浏览 器 默认 值 ,默认 值 为 : 


。 background-color: transparent /* 背 景 颜 色 透 明 * / 

*。 background-image: none /< 无 背景 图 片 * / 

。 background-repeat: repeat /* 背景 完全 平 铺 */ 

。 background-attachment: scroll /* 随 内 容 深 动 */ 

。 background-position: 0% 0% /< 从 左上 和 角 开 始 定位 */ 
说 明 


(1) background-repeat 取 值 有 完全 平 铺 (repeat)、 不 平 铺 (no-repeat)、 水 平平 铺 
(repeat-x) 垂直 平 铺 (repeat-y) 。 其 中 repeat-x 和 repeat-y 的 效果 如 图 4-53 所 示 。 

(2) background-position( 背 景 定位 ) 属 性 值 单位 中 百分数 和 像素 的 意义 不 同 ,使 用 百 
分 数 定位 时 ,是 将 背景 图 片 的 百分比 位 置 和 元 素 盒子 的 百分比 位 置 对 齐 。 例 如 


background:url (hua.gif)no- repeat 50%33%; 


就 表示 将 背景 图 片 的 水 平 50% 处 和 div 盒子 的 水 平 50% 处 对 齐 , 竖 直方 向 33 儿 处 和 盒子 
的 竖 直 方向 33%% 处 对 齐 。 这 样 背景 图 片 将 位 于 盒子 的 水 平 中 央 ( 相 当 于 设置 为 center)， 
垂直 方向 约 1/3 处 。 而 如 果 设 置 为 像素 则 表示 相对 于 盒子 的 左边 缘 或 上 边缘 (边框 内 侧 ) 
偏 移 的 距离 。 图 4-54 对 这 两 种 属性 值 单位 进行 了 对 比 。 





图 4-53 背景 水 平平 铺 和 垂直 平 铺 的 效果 图 4-54 背景 定位 属性 取 值 单位 不 同 的 效果 


background-position 的 取 值 还 可 为 负数 ,这 通常 用 在 背景 图 像 比 盒子 尺寸 还 要 大 时 ， 
设置 为 负数 可 以 使 盒子 不 显示 背景 图 像 的 左边 或 上 边 部 分 的 图 案 。 

背景 的 所 有 这 些 属性 都 可 以 在 DW 的 CSS 面板 的 “背景 "选项 面板 中 设置 ,它们 之 间 
的 对 应 关系 如 图 4-55 所 示 。 


2. background-size 属性 


在 CSS3 之 前 ,背景 图 像 是 无 法 改变 大 小 的 ,也 就 是 不 能 缩放 ,这 在 很 多 时 候 不 太 方 
便 。 为 此 ,CSS3 提供 了 background-size 属性 ,用 来 改变 背景 图 像 的 尺寸 。 其 语法 如 下 : 


background- size: length | percentage | cover | contain; 


其 中 ,length 表示 长 度 ,percentage 表示 百分比 ,cover 表示 保持 图 像 的 宽 高 比例 ,将 图 片 
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div 的 CSS 规则 定义 
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background-attachment- 
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图 4-55 DW 中 的 背景 设置 面板 


缩放 到 正好 完全 覆盖 元 素 的 背景 区 域 。contain 表示 保持 图 像 的 宽 高 比例 ,将 图 片 缩放 到 
正好 能 完全 显示 出 来 的 大 小 。 
下 面 是 一 个 示例 代码 (4-38. html) ,其 显示 效果 如 图 4-56 所 示 。 


div{width: 160px; height: 200px; display:inline-block; 
background: #fcc url (images/txl1.jpg)no- repeat;} 

.boxl{background- size:contain;} 

.box2{background- size:cover;} 

.box3{fbackground- size:100%100%;} 

.box4{background- size:50px 50px; background- repeat :repeat;} 


| ve ve 
by 1 大 区 


区 ON CE 
~ 人 人 和 
< ee 全 
图 4-56 ”background-size 值 为 contain、cover、100% 和 数值 时 的 效果 


本 

- 

、 
vv- 
、 

- 

~ 


-> 
[4 


可 见 , 当 设置 为 contain 时 ,背景 图 片 在 一 个 方向 上 可 能 不 能 铺 满 元 素 ; 设 置 为 cover 
时 ,背景 图 像 能 铺 满 元 素 ,但 图 像 的 某 些 区 域 又 不 能 被 显示 出 来 ;设置 为 100% 100% 时 ， 
能 保证 背景 图 像 正 好 和 元 素 一 样 大 ,但 图 像 可 能 会 发 生变 形 。 

提示 : background-size 属性 无 法 作为 background 属性 的 一 个 属性 值 来 缩写 。 

3。background-origin 与 background-clip 属性 

这 两 个 属性 具有 相同 的 可 选 属性 值 , 分 别 是 border-box、padding-box、content-box。 
默认 值 都 是 padding-box。 也 就 是 说 ,背景 默认 情况 下 是 铺 满 填充 区 域 和 内 容 区 域 的 。 


background-origin 用 来 规定 背景 图 片 的 定位 区 域 ,background-clip 用 来 规定 背景 图 
片 的 裁剪 区 域 。 例 如 ,content-box 表示 背景 只 会 显示 在 内 容 区 域 , 而 不 会 显示 到 填充 区 
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域 ,而 border-box 表示 背景 会 从 边框 区 域 开始 显示 ,因此 ,只 有 当 盒子 设置 了 border 和 
padding 的 值 为 非 0 时 才能 看 到 这 两 个 属性 的 应 用 效果 。 


4. background 多 背景 图 


在 过 去 ,每 个 元 素 只 能 设置 一 张 背景 图 片 , 有 些 不 方便 。 为 此 ,CSS3 标准 允许 使 用 
background 属性 为 元 素 设 置 多 张 背景 图 ,每 个 背景 图 之 间 用 逗号 隔 开 , 示 例 代码 (4-39 
.html) 如 下 ,显示 效果 如 图 4-57 所 示 。 


.mutibg{background: url (images/picl.jpg)no- repeat, /+ 第 一 张 背景 图 * / 
url (images/pic2.jpg)no- repeat 30px 30px, 
url (images/pic3.jpg)no- repeat 60px 60px, 
url (images/pic4.jpg)no- repeat 180px Opx; 

color:#fff;width:270px;line- height:210px;border:1px dotted red;} 

<div class="mutibg"> 多 背景 图 效果 < /div> 





图 4-57 为 元 素 设置 多 个 背景 图 


可 见 , 如 果 多 个 背景 图 发 生 重 释 , 则 前 面 的 背景 图 会 获 盖 在 后 面 的 背景 图 的 上 方 。 
5. opacity 属性 


opacity 属性 用 于 设置 元 素 的 透明 度 。 其 取 值 为 [0 一 1], 取 值 为 0 时 ,表示 元 素 完全 
透明 ,此 时 元 素 不 可 见 , 取 值 为 1 时 表示 完全 不 透明 ,因此 0 一 1 的 值 表 示 半 透明 效果 。 

下 面 的 代码 (4-40. html) 用 来 实现 当 鼠 标 指针 滑动 到 元 素 上 时 ,元素 出 现 半 透明 的 
效果 。 


.box1:hover{opacity:0.57 
filter:Alpha (opacity=-50)7} /* 兼容 IE8- 浏 览 器 * / 


所 有 主流 浏览 器 都 支持 opacity 属性 ,而 IE8 以 下 浏览 器 不 支持 ,但 IE8 支持 使 用 滤 
镜 属性 实现 透明 度 效果 。 因 此 ,上 述 代 码 是 为 了 兼容 IE8 浏览 器 而 使 用 了 filter 属性 。 

opacity 属性 具有 继承 性 ,因此 如 果 设 置 一 个 元 素 的 opacity 值 为 0.5, 则 它 所 有 的 子 
元 素 都 不 可 能 比 这 个 值 更 加 不 透明 。opacity 会 使 元 素 的 背景 和 它 的 内 容 都 变 得 透明 。 
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6. opacity 与 rgba() 的 区 别 


opacity 作用 于 元 素 , 用 opacity 设置 的 透明 度 会 使 元 素 的 背景 和 内 容 ( 如 文字 ) 及 其 
子 元 素 全 部 带 有 透明 度 效 果 , 而 rgba() 是 属性 值 , 只 作用 于 属性 , 它 能 应 用 于 color、 
background-color 和 渐变 属性 中 ,可 以 仅 让 背景 半 透 明 或 仅 让 内 容 半 透 明 。 因 此 rgba() 
使 用 得 更 广泛 一 些 。 

















4.7.2 背景 的 基本 运用 技术 


1. 同时 运用 背景 颜色 和 背景 图 片 


在 一 些 网 页 中 ,页 面 的 背景 从 上 到 下 由 深 颜色 逐渐 过 渡 到 浅 颜 色 , 由 于 网 页 的 高 度 通 
常 不 固定 ,所 以 无 法 仅 用 背景 图 片 来 实现 这 种 渐变 背景 。 这 时 可 以 对 body 元 素 同 时 设 
置 背 景 颜色 和 背景 图 片 ,在 网 页 的 上 部 采用 很 窗 的 从 上 到 下 渐变 的 图 片 水 平平 铺 作为 上 
方 的 背景 ,再 用 一 种 和 图 片 底部 颜色 相同 的 颜色 作为 网 页 背景 色 ,这 样 就 实现 了 很 自然 的 
渐变 效果 ,而 且 无 论 页 面 有 多 高 。 图 4-58 也 是 对 一 个 元 素 同时 运用 背景 图 和 背景 颜色 的 
例子 ,主要 是 设置 背景 图 片 不 平 铺 ,并 且 底 端 对 齐 , 同 时 设置 背景 颜色 。CSS 代码 (4-41. 
html) 如 下 。 





#sidebar{ background:#666 url (images/side bg.gif)no- repeat center bottom; } 


2. 控制 背景 在 盒子 中 的 位 置 及 是 否 平 铺 


在 CSS 中 ,背景 图 像 能 够 精确 定位 到 盒子 的 任何 位 置 ,并 允许 不 平 铺 ,这 时 效果 就 像 
普通 的 img 元 素 一 样 。 例 如 图 4-59 网 页 中 的 背景 图 像 就 是 用 让 背景 图 片 不 平 铺 并 且 定 
位 于 右 下 角 实 现 的 。 实 现 的 代码 (4-42. html) 如 下 。 


后 1e:///F:/ 网 页 课件 /Web2ndcode/c 


同 
个 
元 
素 


十 二 生肖 两 两 相对 ， 六 道 轮回 
第 一 组 是 鼠 和 牛 ， 老 鼠 代 表 智 兢 ， 牛 代表 勘 奋 ， 智 


臣 和 勤奋 一 定 要 紧密 结合 在 一 起 ,- 如 果 光 有 智慧 不 勤 
, 不 动脑 前 ， 那 就 是 思 毒 


勇 笑 和 谱 导 只 有 结 站 
a 





图 4-58 同时 运用 背景 图 和 背景 色 图 4-59 背景 图 片 定 位 在 右 下 角 且 不 平 铺 
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body { background: #eadece url (shu.jpg)no- repeat right bottom ; } 


如 果 和 希望 图 4-59 中 的 背景 图 片 始 终 位 于 浏览 器 的 右 下 角 , 不 会 随 网 页 的 深 动 而 深 
动 , 则 可 将 background-attachment 属性 设置 为 fixed, 代 码 如 下 : 


body {background: #f7f2df url (cha.jpg)no- repeat fixed right bottom ;} 


利用 背景 图 像 不 平 铺 的 方法 还 可 以 改变 列表 的 项 目 符号 。 虽 然 使 用 列表 元 素 的 
CSS 属性 list-style-image:url(arrow. gif) 可 以 将 列表 项 前 面 的 小 黑 点 改变 成 自 定义 的 小 
图 片 , 但 无 法 调整 小 图 片 和 列表 文字 之 间 的 距离 。 

要 解决 这 个 问题 ,可 以 将 小 图 片 设置 成 i 元 素 的 背 3 中心 钠 刘 
景 ,不 平 铺 , 且 居 左 ,为 防止 文字 遮 住 图 片 ,将 li 元 素 的 > 政策 法 规 汇总 
左 padding 设置 成 20px, 这 样 就 可 通过 调整 左 padding > 为 您 服务 
的 值 实现 精确 调整 列表 小 图 片 和 文字 之 间 的 距离 了 , 代 图 4-60 用 图 片 自 定义 项 目 符号 
码 (4-43. html) 如 下 ,效果 如 图 4-60 所 示 。 





ul{ list- style- type:none; } 

1i{ 
background:url (arrow.gif)no- repeat Opx 3px; /* 距 左边 0px, 距 上 边 3px*/ 
padding- left:20px; 


有 了 背景 的 精确 定位 能 力 , 完 全 可 以 使 列表 项 的 符号 出 现在 li 元 素 的 任意 位 置 上 。 
3. 多 个 元 素 背 景 的 到 加 


背景 图 片 的 释 加 是 很 重要 的 CSS 技术 。 当 两 个 元 素 是 典 套 关系 时 ,那么 里 面 元 素 盒 
子 的 背景 将 覆盖 在 外 面 元 素 盒子 背景 之 上 ,利用 这 一 点 ,再 结合 对 背景 图 片 位 置 的 控制 ， 
可 以 将 几 个 元 素 的 背景 图 像 巧妙 地 又 加 起 来 。 下 面 以 4 图 像 可 变 宽 度 圆 角 栏目 框 的 制作 
来 介绍 多 个 元 素 背 景谷 加 的 技巧 。 

制作 可 变 宽度 的 圆 角 栏目 框 需要 4 个 圆 角 图 片 , 当 圆 角 框 制作 好 之 后 ,无论 怎样 改变 
栏目 框 的 高 度 或 宽度 , 圆 角 框 都 能 根据 内 容 自动 适应 。 

由 于 需要 4 个 圆 角 图 片 作 可 变 宽度 的 圆 角 栏 目 框 , 而 一 个 元 素 的 盒子 只 能 放 一 张 背 
景 图 片 (假设 不 使 用 CSS3 的 多 背景 图 功能 ) ,所 以 必须 准备 4 个 盒子 ,把 这 4 张 圆 角 图 片 
分 别 作为 它们 的 背景 ,考虑 到 栏目 框 内 容 的 语义 问题 ,这 里 选择 div、h3、p、span 共 4 个 元 
素 , 按 照 图 4-61 的 方式 设置 这 4 个 元 素 的 背景 图 片 摆 放 位 置 ,并 且 都 不 平 铺 。 然 后 再 把 
这 4 个 盒子 以 适当 的 方式 琶 放 在 一 起 ,这 是 通过 以 下 元 素 嵌 套 的 代码 实现 的 。 

从 图 4-43 中 可 以 看 出 ,要 形成 圆 角 栏目 框 ,首先 要 把 span 元 素 放 到 p 元 素 里 面 ,这 
样 它们 两 个 的 背景 就 姜 加 在 一 起 ,形成 了 下 面 的 两 个 圆 角 ,然后 再 把 h3 元 素 和 p 元 素 都 
放 到 div 元 素 中 去 ,就 形成 了 一 个 圆 角 框 的 4 个 圆 角 了 。 因 此 ,结构 代码 (4-44. html) 
如 下 。 
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<div id="round"> <span> 


图 4-61 4 图 像 可 变 宽度 圆 角 栏目 框 中 4 个 元 素 盒子 的 背景 设置 





<div id="round"> 
<h3> 圆 角 栏 目 框 的 标题 < /3> 
<p><span> 栏 目 框 的 内 容 …< /span>< /p> 
</div> 


由 于 几 层 背 景 的 琶 加 ,背景 色 只 能 放 在 最 底层 的 盒子 上 ,也 就 是 对 最 外 层 的 div 元 素 
设置 背景 色 ,否则 上 面 元 素 的 背景 色 会 把 下 面 元 素 的 
背景 图 片 ( 圆 角 ) 覆 盖 掉 。 与 此 相反 ,为 了 让 内 容 能 放 
在 距 边 框 有 一 定 边 距 的 区 域 ,必须 设置 padding 值 ,而 
且 padding 值 只 能 设置 在 最 里 层 的 盒子 (span 和 h3) 
上 。 因 为 如 果 将 padding 设置 在 外 层 盒 子 ( 如 p) 上 ， 
则 内 外 层 盒子 的 边缘 无 法 对 齐 ,就 会 出 现 如 图 4-62 所 
示 的 错误 。 

接 下 来 对 这 4 个 元 素 设置 CSS 属性 ,主要 是 将 这 图 4-62 错误 的 背景 图 像 位 置 
4 个 圆 角 图 片 定 位 到 相应 的 位 置 上 ,span 元 素 必 须 设 
置 为 块 级 元 素 显 示 ,应 用 盒子 属性 才 会 有 正确 效果 。CSS 代码 如 下 。 






ETTTT .S 同 
文件 四 编辑 到 ) 






可 变 宽 度 圆 角 框 


#round{ 
font: 12px/1.6 arial; 
background: #abc276 Url (images/right- top.gif)no- repeat right top; } 
#rounded h3 { 
background: url (images/left- top.gif)no- repeat; 
padding: 15px 20px 07 


color: #fff; /* 设置 标题 的 文字 颜色 为 白色 * / 
margin: 07 } 

#roundedp { 
margin: 0; /x* 清除 p 元 素 的 默认 边界 * / 
text- indent :2em; /* 内 容 部 分 段 前 空 两 格 * / 


background: url (images/left- bottom.gif)no- repeat left bottom; } 
#rounded span{ 
padding: 10px 20px 13px; display:block; 
background:url (images/right-bottom-gif)no- repeat right bottom; 让 
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最 终 效果 如 图 4-63 所 示 ,但 这 个 圆 角 框 没有 边框 ,要 制作 带 有 边框 的 可 变 宽 度 圆 角 
框 , 则 至 少 需要 4 张 图 片 通过 滑动 门 技术 实现 。 


FETTT rT woslolx 
文件 和 ) 编辑 EE) 查看 信 


可 变 宽度 国 角 框 





图 4-63 最终 的 效果 


4.7.3 滑动 门 技术 


CSS 中 有 一 种 著名 的 技术 叫 滑动 门 技 术 (sliding doors technique) , 它 是 指 一 个 图 像 
在 另 一 个 图 像 上 滑动 ,将 它 的 一 部 分 隐藏 起 来 ,因此 而 得 名 。 实 际 上 它 是 一 种 背景 的 高 级 
运用 技巧 ,主要 是 通过 两 个 盒子 背景 的 重 委 和 控制 背景 图 片 的 定位 实现 的 。 

滑动 门 技术 的 典型 应 用 有 : 制作 图 像 阴影 ;制作 自 适应 宽度 的 圆 角 导航 条 。 


1. 图 像 阴影 


明 影 是 一 种 很 流行 、 很 有 吸引 力 的 图 像 处 理 技巧 , 它 给 平淡 的 设计 增加 了 深度 ,形成 
立体 感 。 使 用 图 像 处 理 软 件 很 容易 给 图 像 增 添 明 影 。 但 是 ,可 以 使 用 CSS 产生 简单 阴影 
效果 ,而 不 需要 修改 底层 的 图 像 。 通 过 滑动 门 技术 制作 的 阴影 能 自 适 应 图 像 的 大 小 , 即 无 
论 图 像 是 大 是 小 都 能 为 它 添加 阴影 效果 。 这 对 于 交友 类 网 站 很 适合 ,因为 网 友 上 传 的 个 
人 生活 照片 大 小 一 般 是 不 一 样 的 ,而 这 种 方法 能 自 适应 地 为 这 些 照片 添加 阴影 。 

图 4-64 展示 了 图 像 明 影 的 制作 过 程 ,在 图 4-64 中 有 6 张 小 图 ,对 其 进行 了 编号 (四 一 
@) ,在 下 面 的 制作 步骤 中 为 了 叙述 方便 ,我 们 用 图 中 一 @ 表 示 图 4-64 中 的 6 张 小 图 。 

(1) 准备 一 张 图 四 所 示 的 gif 图 片 ,该 图 片 左边 和 上 边 是 白色 部 分 ,其 他 区 域 是 完全 
透明 的 ,将 其 称 为 “左上 边 图 片 ”, 然 后 再 准备 一 张 图 四 所 示 的 灰色 图 片 作 背 景 , 灰 色 图 片 
的 右边 和 下 边 最 好 有 和 柔 边 阴影 效果 ,这 两 张 图 片 都 可 以 比 待 添加 阴影 的 图 像 尺 寸 大 得 多 。 

(2) 把 待 添 加 阴影 的 图 片 久 放 到 灰色 图 片上 面 ,通过 设置 图 像框 的 填充 值 使 图 像 的 
右边 和 下 边 能 留 出 一 些 , 显 示 灰 色 的 背景 ,如 图 中 四 所 示 , 灰 色 背 景 图 片 多 余 的 部 分 就 显 
示 不 下 了 。 

(3) 接着 再 把 图 四 插入 到 图 像 和 灰色 背景 图 片 之 间 ,使 图 四 的 图 片 和 图 像 @ 图 片 从 
左上 角 开 始 对 齐 。 这 样 它 的 右上 角 和 左下 角 就 挡住 阴影 了 ,就 出 现 了 如 图 @ 所 示 的 阴影 
效果 。 

(4) 图 的 图 片 比 图 像 大 一 些 也 没关系 ,因为 图 的 图 片 和 图 像 是 左上 角 对 齐 的 ,所 
以 其 超出 图 像 盒子 的 右边 和 下 边 部 分 就 显示 不 下 了 。 而 图 @ 的 灰色 背景 图 片 由 于 是 从 右 





107 二 C—O 














《HTML5+CSS3 Web 前 端 开 发 》 


下 角 开 始 铺 ,所 以 超出 图 像 盒 子 的 左边 和 上 边 部 分 就 显示 不 下 了 。 如 图 @ 所 示 , 这 样 图 像 
阴影 就 能 自 适应 图 像 大 小 ,就 好 像 中 和 加 两 张 图 片 分 别 向 右 下 和 左上 两 个 方向 滑动 一 样 。 








图 4-64 滑动 门 制作 图 片 阴影 原理 图 


也 可 以 不 用 图 @ 的 图 片 文件 作 灰 色 的 背景 ,而 是 直接 将 img 元 素 的 背景 设 为 灰色 ， 
再 设置 它 的 背景 图 片 为 图 @ 的 图 片 , 由 于 背景 图 片 会 位 于 背景 颜色 上 方 , 这 样 就 出 现 了 没 
有 和 柔 边 的 阴影 效果 。 代 码 如 下 (4-45. html) ,效果 如 图 4-65 所 示 。 


img{ 
background- color: #CCC; /* 灰色 背景 作为 阴影 * / 
padding:0 6px 6px 0; /* 使 右边 和 下 边 留 出 一 部 分 显示 灰色 背景 * / 
background- image: url(top- left.gif); /* 背景 图 像 为 左上 边 图 片 * / 


<img src= "works.jpg"/> 





图 4-65 利用 img 的 背景 色 和 左上 边 图 片 制作 阴影 效果 


当然 ,最 好 先 给 图 片 添加 边框 和 填充 ,使 图 片 出 现 像框 效果 ,再 对 它 添加 阴影 效果 ,这 
样 更 美观 。 由 于 阴影 必须 在 img 图 像 的 边框 外 出 现 ,所 以 在 img 元 素 的 盒子 外 必须 再 套 
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一 个 盒子 。 这 里 选择 将 img 元 素 放 和 到 一 个 div 元 素 中 。 代 码 如 下 ,效果 如 图 4-66 
所 示 。 


.shadow img { 


background- color: #FFF; /* 图 像 填 充 区 的 背景 为 白色 */ 
padding: 6px; 
border: 1px solid #333; /* 图 像 边 框 为 灰色 */ 1} 

.shadow { 
background: #ccc url (top- left.gif); /=* 左 上 边 图 像 将 释放 在 灰色 背景 之 上 * / 
float: left; /* 浮动 使 div 宽度 不 会 自动 伸展 * / 


padding:0 6px 6px 07 } 


<div class="shadow">< img src= "works.jpg"/></div> 


由 于 是 用 背景 色 作 的 阴影 ,所 以 没有 阴影 渐渐 变 淡 的 和 柔 边 效 果 , 为 了 实现 柔 边 效 果 ， 
就 不 能 用 背景 色 作 阴 影 , 而 还 是 采用 图 4-64@ 中 一 张 右 边 和 下 边 是 柔 边 阴影 的 图 像 作 阴 
影 。 这 样 img 图 像 下 面 就 必须 有 两 张 图 片 重生 ,最 底层 放 阴 影 图 片 (图 4-64@) ,上面 一 
层 放 左上 边 图 片 (图 4-64)。 因 为 每 个 元 素 只 能 设置 一 张 背景 图 片 ,而 为 了 放 两 张 背景 
图 片 ,就 必须 有 两 个 盒子 。 因 此 必须 在 img 元 素 外 套 两 层 div。 

另外 ,我 们 知道 png 格式 的 图 片 支 持 alpha 透明 ( 即 半 透 明 ) 效 果 , 因 此 可 以 将 左上 边 
图 片 (图 4-64 中 ) 和 灰色 背景 图 像 交界 处 的 地 方 做 成 半 透 明 的 白色 ,保存 为 png 格式 后 引 
入 ,这 样 阴影 就 能 很 自然 地 从 白色 过 渡 到 灰色 。 实 现 的 代码 (4-46. html) 如 下 ,效果 如 
图 4-67 所 示 。 


.shadow img { 
background- color: white; padding: 6px; border: lpx solid #333;} 
.shadow div { 


background- image: url (top- left .png); 
padding:0 6px 6px 0; /* 留 出 两 张 背景 图 片 的 显示 位 置 * / } 


.shadow { 
background: Url (images/bottom- right .gif)right bottom; 
float: left;} 


<div class="shadow"><div><img src="works.jpg"/></div></div> 




















图 4-66 添加 了 边框 后 的 阴影 效果 图 4-67 通过 图 像 实现 了 和 柔 边 的 阴影 效果 








109 











《HTML5+CSS3 Web 前 端 开 发 》 


这 样 就 实现 了 图 像 柔 边 阴影 效果 ,由 于 左上 边 图 片 和 img 图 像 是 左上 角 对 齐 , 所 以 
如 果 左上 边 图 片 比 img 图 像 大 , 即 超过 了 div 盒子 的 大 小 ,那么 多 出 的 右 下 部 分 将 显示 不 
下 。 同 样 ,阴影 背景 图 像 与 img 图 像 从 右 下 角 开 始 对 齐 , 如 果 背 景 图 像 比 盒子 大 ,那么 背 
景 图 像 的 左上 部 分 也 会 自动 被 裁 去 。 所 以 ,我 们 可 以 把 这 两 张 图 片 都 做 大 些 ,就 能 自 适应 
地 为 任何 大 小 的 图 片 添加 阴影 效果 。 


2. 自 适 应 宽度 圆 角 导航 条 


现在 很 多 网 站 都 使 用 了 圆 角 形式 的 导航 条 ,这 种 导航 条 两 端 是 圆 角 ,而 且 还 可 以 带 有 
背景 图 案 , 如 果 导 航 条 中 的 每 一 个 导航 项 都 是 等 宽 的 ,那么 制作 起 来 很 简单 ,用 一 张 圆 角 
图 片 作为 导航 条 中 所 有 a 元 素 的 background-image 就 可 以 了 。 

但 是 有 些 导 航 条 中 的 每 个 导航 项 并 不 是 等 宽 的 ,如 图 4-68 所 示 , 这 时 能 否 仍 用 一 张 
圆 角 图 片 作 所 有 导航 项 的 背景 呢 ? 答案 是 肯定 的 ,使 用 滑动 门 技术 就 能 实现 : 当 导 航 项 
中 的 文字 增多 时 , 圆 角 图 片 就 能 够 自动 伸展 (当然 这 并 不 是 通过 对 图 片 进行 拉 伸 实现 的 ， 
那样 会 使 圆 角 发 生变 形 )。 它 的 原理 是 用 一 张 很 宽 的 圆 角 图 片 给 所 有 导航 项 作 背 景 。 





nl re | ens | mms | 
图 4-68 自 适应 宽度 的 圆 角 导航 条 





由 于 导航 项 的 宽度 不 固定 ,而 圆 角 总 要 位 于 导航 项 的 两 端 。 这 就 需要 用 两 个 元 素 的 
盒子 分 别 放 圆 角 图 片 的 左右 部 分 ,而 且 它 们 之 间 要 发 生 重 琶 ,所 以 选择 在 a 标记 中 藤 入 b 
标记 ,这 样 就 得 到 了 两 个 戏 套 的 盒子 。 结 构 代 码 如 下 (4-47. html) ,之 后 为 CSS 的 设置 

<div id="nav"> 

<a href="#"><b> 首 页 </b></a><a href="#"><b> 中 心 简介 </b>< /a> 


…<a href="#"><b> 技 术 支 持 和 服务 < /b>< /a> 
</div> 


(1) 利用 CSS 设置 a 元 素 的 背景 为 圆 角 图 片 的 左边 部 分 ,只 要 设置 a 元 素 盒子 比 圆 
角 图 片 窗 ,让 圆 角 图 片 作 为 背景 从 左边 开始 平 铺 a 元 素 , 则 圆 角 图 片 右边 就 显示 不 下 了 ， 
效果 如 图 4-69@ 所 示 。 

(2) 设置 b 元 素 的 背景 为 圆 角 图 片 的 右边 部 分 ,只 要 设置 b 元 素 盒 子 比 圆 角 图 片 窗 ， 
让 圆 角 图 片 作为 背景 从 右边 开始 平 铺 b 元 素 , 则 圆 角 图 片 左 边 就 显示 不 下 了 。 效 果 如 
图 4-69@ 所 示 。 

(3) 把 b 元 素 插入 到 a 元素 中 .这 时 a 元 素 的 盒子 为 了 容纳 b 的 盒子 会 被 撑 大 ,如 
图 4-69@@ 所 示 。 这 样 里 面 b 元 素 的 背景 就 位 于 外 面 a 元 素 背 景 的 上 方 , 通 过 设置 a 元素 
的 左 填 充值 使 b 的 盒子 不 会 挡住 a 盒子 左边 的 圆 角 ,而 b 盒子 右边 的 圆 角 ( 右 上 方 为 不 透 
明白 色 背 景 ) 则 挡住 了 a 盒子 右边 的 背景 ,这 样 左右 两 边 的 圆 角 就 都 出 现 了 ,如 图 4-69@ 
所 示 。 同 时 ,改变 文字 的 多 少 ,能 使 导航 条 自动 伸展 ,而 圆 角 部 分 位 于 padding 区 域 , 不 会 
影响 圆 角 。 
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4.7. 


显示 


在 盒 


元 素 
的 上 


CSS 样式 美化 








技术 之 皖 和 服务 


加 b 元素 的 盒子 


册 把 b 元 素 插入 到 a 元素 中 


四 a 元 素 的 僵 子 轿 a 元素 的 盒子 被 撑 大 


1 元 素 的 背景 将 眉 放 在 a 元 素 上 
er FT 


形成 风 角 导航 条 效果 
图 4-69 滑动 门 圆 角 导 航 条 示意 图 





(4) 根据 以 上 分 析 设 置 外 面 盒子 a 元 素 的 CSS 样式 如 下 。 


#nava{ 
font- size: 14px; color: white; text- decoration: none; 
line-height: 32px; /* 设置 盒子 高 度 与 行 高 相等 ,实现 文字 垂直 居中 * / 
padding- left: 24px; /* 设 置 左 填 充 为 24px, 防 止 里 面 的 内 容 挡 住 左 圆 角 x* / 
float: left; /* 使 导航 项 水 平 排列 * / 


background: url (round.gif); /* 背 景 图 像 默 认 从 左边 开始 铺 * /} 


(5) 再 写 里 面 盒 子 b 元 素 的 CSS 样式 代码 。 


#navabi 
background: url (round.gif)right top;  /* 使 用 同一 张 背 景 图 像 但 从 右边 开始 铺 * / 
display: block; padding- right: 24px; /* 防止 里 面 的 文字 内 容 挡住 右 圆 角 * /} 


(6) 最 后 给 导航 条 添加 简单 的 交互 效果 。 


#nav a:hover {color: silver;} /* 改变 文字 颜色 * / 


4 背景 图 像 的 翻转 


通过 背景 定位 属性 (background-position) 可 以 使 背景 图 片 从 盒子 的 任意 位 置 上 开始 
,如 果 设 置 background-position 为 负 值 ,那么 将 有 一 部 分 背景 移出 盒子 ,而 不 会 显示 
子 中 ;另外 ,如 果 盒 子 没有 背景 那么 大 ,那么 只 能 显示 背景 图 的 一 部 分 。 

利用 这 些 特 点 ,用 户 可 以 将 多 个 元 素 的 背景 图 片 放 置 在 一 个 大 的 图 片 文件 里 ,让 每 个 
的 盒子 只 显示 这 张大 背景 图 的 一 部 分 ,例如 制作 导航 条 时 ,在 默认 状态 下 显示 背景 图 
半 部 分 ,鼠标 滑 过 时 显示 背景 图 的 下 半 部 分 ,这样 就 用 一 张 图 片 实现 了 导航 条 背景 的 


翻转 。 
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把 多 个 背景 图 像 放 在 一 个 图 像 文件 里 的 好 处 有 以 下 两 点 。 

(1) 减少 了 文件 的 数量 ,便于 网 站 的 维护 管理 。 

(2) 鼠标 指针 移动 某 个 导航 项 上 ,如 果 要 更 换 一 个 背景 图 像 文 件 ,那么 有 可 能 要 蔡 换 
的 图 像 还 没有 下 载 下 来 ,就 会 出 现 一 下 停顿 ,浏览 者 会 不 知 发 生 了 什么 ;而 如 果 使 用 同一 
个 文件 ,就 不 会 出 现 这 个 问题 了 。 

例如 ,对 于 自 适应 宽度 圆 角 导航 条 来 说 ,可 以 把 导航 条 鼠标 离开 和 滑 过 两 种 状态 时 的 
背景 做 在 同一 个 图 像 文件 里 ,如 图 4-70 所 示 。 实 现在 鼠标 滑 过 时 背景 图 案 的 翻转 , 即 当 
鼠标 滑 过 时 ,让 它 显示 图 片 的 下 半 部 分 ,默认 时 则 显示 图 片 的 上 半 部 分 。 


A 


图 4-70 将 正常 状态 和 鼠标 悬 停 状 态 的 背景 图 案 放 在 一 张 图 片 round. gif 





在 4.7.3 节 的 4-47.html 的 CSS 代码 中 添加 如 下 代码 (4-48. html) , 即 实现 鼠标 悬 停 
时 导航 图 像 的 翻转 ,其 效果 如 图 4-71 所 示 。 


a:hover { 
background- position:0 - 32px; } /* 图 片 从 左边 开始 铺 , 向 上 偏 移 32px* / 
a:hover b{ color: red; 


background- position:100%- 32px; } /* 图 片 从 右边 开始 铺 , 向 上 偏 移 32px * / 


图 4-71 带 有 图 片 翻转 效果 的 滑动 门 导航 条 


推荐 把 许多 元 素 的 背景 图 像 放 在 同一 个 图 片 文件 中 ,这 称 为 CSS Sprite( 精 灵 ) 技 术 。 
这 样 可 减少 要 下 载 的 文件 数量 ,从 而 减少 对 服务 器 的 请 求 次 数 ,加 快 页 面 载 人 速度 。 


4.7.5 传统 圆 角 效果 


圆 角 在 网 页 设计 中 让 人 又 爱 又 恨 ,一 方面 设计 师 为 追求 美观 的 效果 经 常 需要 借助 于 
圆 角 , 另 一 方面 为 了 在 网 页 中 设计 圆 角 又 不 得 不 增添 很 多 工作 量 。 在 用 表格 设计 圆 角 框 
时 ,制作 一 个 固定 宽度 的 圆 角 框 需要 一 个 3 行 1 列 的 表格 ,在 上 下 两 格 放 圆 角 图 案 。 而 用 
表格 制作 一 个 可 变 宽 度 的 圆 角 框 则 更 复杂 ,通常 采用 “九宫 格 " 的 思想 制作 , 即 利用 一 个 
3 行 3 列 的 表格 ,把 4 个 角 的 圆 角 图 案 放 到 表格 的 左上 、 右 上 、 左 下 、 右 下 4 个 单元 格 中 ， 
把 圆 角 框 4 条 边 的 图 案 在 表格 的 上 中 、 左 中 、 右 中 和 下 中 4 个 单元 格 中 进行 平 铺 ,在 中 间 
一 个 单元 格 中 放 内 容 。 

尽管 在 4. 5. 3 节 使 用 border-radius 可 以 方便 地 制作 圆 角 盒子 ,但 如 果 要 制作 带 有 花 
纹 或 图 案 的 圆 角 , 则 还 是 需要 用 一 些 传统 的 方法 ,下 面 对 传统 CSS 圆 角 设计 分 类 进行 
讨论 。 
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1. 固定 宽度 的 圆 角 框 (不 带 边框 的 ) 


用 CSS 制作 不 带 边框 的 固定 宽度 圆 角 框 (如 图 4-72 所 示 ) 至 少 需要 两 个 盒子 : 一 个 
盒子 放置 顶部 的 圆 角 图 案 ; 另 一 个 盒子 放置 底部 的 圆 角 图 案 ,并 使 它 位 于 盒子 底部 。 把 这 
两 个 盒子 释放 在 一 起 ,再 对 栏目 框 设置 和 圆 角 相同 的 背景 色 就 可 以 了 。 关 键 代 码 (4-49 
.html) 如 下 。 


#rounded{font: 12px/1.6 arial; 
background: #cba276 url (images/bottom.gif)no- repeat left bottom; 
width: 280px; padding: 0 0 18px; margin:0 auto;} 
#rounded h3 { 
background: url (images/top.gif)no- repeat; 
padding: 20px 20px 0; font- size: 170%; color: white; 
line-height:lem; margin: 0; } 
<div id="rounded"> 
<h3> 不 带 边框 的 圆 角 框 < /h3><p> 这 是 一 个 不 带 边框 的 圆 角 框 …< /p> 
</div> 


不 带 边 框 的 圆 角 框 





图 4-72 不 带 边框 的 圆 角 框 


2. 固定 宽度 的 圆 角 框 ( 带 边框 的 ) 


制作 带 边 框 的 固定 宽度 圆 角 框 (如 图 4-73 所 示 ) 则 至 少 需要 3 个 盒子 ,最 底层 的 盒子 
放置 圆 角 框 中 部 的 边框 和 背景 组 成 的 图 案 ,并 使 它 垂直 平 铺 ,上 面 两 层 的 盒子 分 别 放置 顶 
部 的 圆 租 和 底部 的 圆 角 ,这样 在 顶部 和 底部 圆 角 图 片 就 遮盖 了 中 部 的 图 案 ,形成 了 完整 的 
圆 角 框 。 代 码 (4-50. html) 如 下 。 


#rounded{font: 12px/1.6 arial; 
background: Url (images/middle- frame .gif)repeat—y; 
width: 280px; padding: 0; margin:0 auto;} 
#rounded h3 { 
background: url (images/top- frame.gif)no- repeat; 
padding: 20px 20px 0; font- size: 170%; color: #cba276; margin: 0;} 
#rounded p.last {padding: 0 20px 18px; 
background: url (images/bottom- frame.gif)no- repeat left bottom; 
height:1%; /x 防止 元 素 没 有 内 容 在 IE6 中 不 显示 */ } 
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<div id="rounded"> 
<h3> 带 边框 的 圆 角 框 </h3> ” <p> 这 是 一 个 固定 宽度 的 圆 角 框 …< /p> 


<p class="last"></p></div> 


带 边 框 的 辕 角 框 
这 是 一 个 固定 宽度 的 国 币 框 ， 由 于 是 固定 


的 宽度 ， 因 此 制作 起 来 容易 且 简单 。 这 个 图 角 
框 的 上 下 随 着 内 容 增多 可 以 自由 伸展 ， 图 角 不 
会 被 破坏 。 





图 4-73 带 边 框 的 圆 角 框 
需要 说 明 的 是 ,顶部 的 圆 角 图 案 和 底部 的 圆 角 图 案 既 可 以 分 别 做 成 一 张 图 片 ,也 可 以 
把 它们 都 放 在 一 张 图 片 里 ,通过 控制 背景 位 置 来 实现 显示 哪 部 分 圆 角 。 


4.8 “CSS3 样式 美化 功能 


CSS3 提供 的 样式 美化 功能 主要 有 阴影 效果 、 渐 变 效 果 、 描 边 效果 和 谈 单 效果 ,这 使 
得 过 去 很 多 需要 使 用 图 片 实现 的 效果 ,现在 可 以 用 CSS3 代码 实现 了 。 


4.8.1 阴影 和 发 光 效果 
CSS3 提供 了 两 个 实现 阴影 效果 的 属性 : box-shadow 属性 用 来 为 元 素 的 盒子 添加 阴 
影 ,text-shadow 属性 用 来 为 文本 添加 阴影 。 这 两 个 属性 的 属性 值 设置 方式 都 是 一 样 的 。 
1. 盒子 阴影 
box-shadow 属性 的 语法 如 下 : 


box- shadow: h- shadow v- shadow blur spread color [inset]; 


其 中 ,h-shadow 和 v-shadow 用 于 设置 阴影 偏离 盒子 的 水 平和 垂直 距离 ,blur 设置 阴影 的 
模糊 距离 ,spread 设置 阴影 的 尺寸 大 小 。color 设置 阴影 的 颜色 ,inset 设置 阴影 为 外 阴影 
(outset, 上 默认 值 ) 还 是 内 阴影 (inset) 。 


box- shadow: 10px 10px 5px #888888; /* 设 置 左下 角 阴 影 */ 
box- shadow: 0 0 15px #888888; /* 设 置 外 发 光 * / 
box- shadow: 10px 10px 5px #888888 inset; /= 设置 内 凹 阴影 * / 


提示 : 如 果 只 写 3 个 数值 ,表示 省 略 了 spread 值 ,此 时 spread 默认 值 为 0。 
可 见 ,如果 设置 h-shadow 和 v-shadow 的 值 为 正 数 , 则 为 左下 角 偏 移 的 阴影 ,而 如 果 
值 为 0, 则 不 发 生 偏 移 , 变 成 一 种 外 发 光 的 效果 。 
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还 可 以 为 4 条 边 设置 不 同 的 阴影 ,示例 代码 如 下 : 


box- shadow:—10px 0 10px red, /* 左边 阴影 * /，10px 0 10px yellow， /* 右边 阴影 */ 
0 -10px 10px blue, /* 上 边 阴影 * / 0 10px 10px green; ”/* 下边 阴影 */ 


下 面 是 图 4-74 所 示 各 种 阴影 效果 对 应 的 完整 代码 (4-51. html) 。 


<style> 
div{display: inline - block; width: 120px; height: 100px; margin: 10px; border— 
radius:8px; line- height:100px; text-align:center; color:white;background- color: 


#9C9;} 

.shadl{box- shadow: 10px 10px 5px #888888; /* 设 置 左下 角 阴 影 */  } 
.shad2{box- shadow: 0 0 25px #888888; /* 设 置 外 发 光 */ 1} 
.shad3{box- shadow: 10px 10px 5px #888888 inset; /设置 内 凹 阴影 * /} 


.shad4{box-shadow:-10px 0 10px red， /* 左边 阴影 * / 10px 0 10px yellow,/* 右边 阴影 */ 
0 -10px 10px blue, /* 上边 阴影 */ 0 10px 10px green; /* 下 边 阴影 */ } 
</style> 

<div class="shadl"> 左 下 角 阴 影 </div><div class="shad2"> 外 发 光 < /div> 

<div class="shad3"> 内 阴影 </div><div class="shad4"> 多 颜色 阴影 < /div> 


图 4-74 各 种 阴影 效果 


2. 翘 边 阴影 


图 4-75 是 一 种 翘 边 阴影 效果 。 这 种 效果 制作 的 思路 是 : 为 图 像 所 在 的 元 素 增加 两 
个 伪 元 素 ,将 伪 元 素 的 盒子 先 倾斜 变 成 平行 四 边 形 ,再 旋转 一 定 角 度 ,就 露出 两 个 角 了 ,如 
图 4-76 所 示 。 男 一 个 伪 元 素 的 盒子 也 是 类 似 做 法 ,代码 (4-52. html) 如 下 。 


-box 1i{ 

position: relative; padding: 5px; margin- right: 25px; 

float: left; width: 290px; height: 200px; background: #fff; 

box- shadow: 0 0px 4px rgba (0,0,0,0.3), 0 0 60px rgba (0,0,0,0.1)inset; 总 
.box li:before{ 

Position:absolute content: ''; width: 90%; height: 80%; 

left: 18px; bottom: 11lpx; z-index: -27 /* 使 阴影 置 于 底层 * / 

background: transparent; 

box- shadow: 0 8px 20px rgba (0,0,0,0.6); 

transform: skew(-12deg)rotate (- 5deg); /* 先 扭曲 -12°, 再 旋转 -5°*/ } 
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-box li:after{ 


了 position:absolute content: ''; width: 90%; height: 80%; right: 18px; 
bottom: 1lpx; z-index: -2; background: transparent; 
box- shadow: 0 8px 20px rgba (0,0,0,0.6); 
transform: skew (12deg)rotate (5deg);} 

<ul class="box"><1i><img src="img/1.jpg"></1i>… 


</ul> 





图 4-75” 旋 边 阴影 效果 图 4-76 ”和 区 边 阴影 原理 


除了 考 边 阴影 外 ,这 种 方法 还 可 以 用 来 制作 如 图 4-77 所 示 的 曲线 阴影 ,其 原理 图 如 
图 4-78 所 示 ,读者 可 根据 原理 图 写 出 实现 的 代码 。 





图 4-77 曲线 阴影 效果 图 4-78 曲线 阴影 原理 


3. 文字 阴影 


text-shadow 属性 用 于 添加 文本 阴影 ,这 使 得 过 去 要 在 Photoshop 中 实现 的 阴影 、 发 


光 等 效果 可 以 直接 用 CSS 实现 了 。text-shadow 属性 的 取 值 和 box-shadow 完全 一 致 ,下 
面 是 几 个 实例 (4-53. html) ,效果 如 图 4-79 所 示 。 


text— shadow: 0 0 10px red; 


/x* 红色 发 光 文字 * / 
text- shadow: 0 lpx lpx #fff; /* lpx 白色 阴影 的 文字 * / 
text- shadow: — lpx — lpx 0 #fff, lpx lpx 0 #333, 1px lpx 0 #444; 

/* 浮雕 字 效 果 * / 
text- shadow: 0 0 5px #f£96; color:transparent; /< 模糊 字 效 果 * / 
text- shadow: 1px lpx 0 #f96,- 1px -lpx 0 #f96; /* 描 边 字 效 果 * / 

拘 册 38 展 








图 4-79 发光 字 、 浮 雕 字 、 模 糊 字 、 描 边 字 效 果 
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4.8.2 渐变 效果 
渐变 是 指 一 系列 (至 少 两 种 ) 颜 色 之 间 的 缓慢 过 渡 。 利 用 渐变 可 制作 出 元 素 被 光照 射 
等 效果 。 渐 变 属 性 可 用 于 背景 图 或 边框 图 。CSS3 中 的 渐变 包括 线性 渐变 和 径 向 渐变 。 
1. 线性 渐变 
线性 渐变 linear-gradient() 必 须 作 为 background-image 的 属性 值 , 它 的 语法 如 下 : 


background- image: linear- gradient (direction, color- stopl, color- stop2, *); 


线性 渐变 的 第 1 个 参数 是 方向 ,其 值 既 能 是 方向 ,也 能 是 角度 。 如 果 不 写 , 则 默认 值 
是 从 上 到 下 渐变 (to bottom) 。 下 面 是 线性 渐变 的 一 些 例子 (4-54. html) 。 


background- image: linear- gradient (red, blue); /* 上 红 下 蓝 的 渐变 * / 
background- image: linear- gradient (black, rgba(55,0,0,0)); 
/* 上 黑 下 透明 的 渐变 * / 


background- image: linear- gradient (to right, red , blue); 
/# 左 红 右 蓝 的 渐变 * / 
background- image: linear- gradient (to bottom right, red , blue); 
/* 左上 角 红 到 右 下 角 蓝 的 渐变 * / 
background- image: linear- gradient (120deg, red , blue); 
/* 左 上 角 120 红 到 蓝 渐变 * / 
background- image: linear- gradient (red, green, blue); /* 上 红 中 绿 下 蓝 的 渐变 * / 


以 上 渐变 颜色 是 在 盒子 范围 内 均匀 分 布 的 。 如 果 和 希望 两 种 渐变 颜色 在 盒子 范围 内 占 
据 的 比例 不 一 致 ,可 以 在 颜色 后 面 添 加 长 度 或 百分比 。 


background- image: linear- gradient (to right, red 75%,blue); 
/* 从 距 左 边 75s 的 位 置 开 始 左 红 右 蓝 的 渐变 * / 
background- image: linear- gradient (to right, red 100px ,blue) 


另外 ,使 用 repeating-linear-gradient 能 创建 重复 的 线性 渐变 。 下 面 的 代码 将 红 黄 蓝 
3 种 渐变 颜色 不 断 地 重复 ,会 产生 5 行 重复 的 水 平 条 纹 。 


background: repeating- linear- gradient (red, yellow 10%, green 20%); 


2. 径 向 渐变 
径 向 渐变 radial-gradient() 是 指 由 一 个 中 心 点 开始 向 四 周 扩散 的 渐变 。 其 语法 如 下 : 


background- image: radial- gradient ([position,] [shape size,] start- color, stop— 


color); 
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径 向 渐变 的 第 2 个 参数 为 中 心 点 位 置 ,第 2 个 参数 为 直径 ,这 两 个 参数 是 可 选 的 ,如 
果 不 设 置 , 则 中 心 点 默认 是 元 素 的 正中 心 , 直 径 默认 是 元 素 中 心 点 到 背景 边缘 的 距离 。 
例如 : 


background: radial- gradient (red, yellow, green); /x* 从 中 心 到 四 周 为 红 黄 蓝 的 渐变 * / 
background: radial-gradient (200px at top right, red,white, green); 
/* 以 右上 角 为 中 心 点 半径 为 200px 的 径 向 渐变 * / 


默认 情况 下 ,渐变 的 起 始 位 置 是 从 渐变 的 中 心 到 元 素 背景 的 边缘 ,如 果 要 设置 渐变 的 
起 始 位 置 , 可 以 在 每 种 颜色 后 增加 一 个 长 度 或 百分比 值 。 例 如 ,下 面 代 码 (4-55. html) 的 
显示 效果 如 图 4-80 所 示 。 


.radial {width: 400px; height: 240px; border- radius:12px; 
background: radial- gradient (200px,white 100px, red 100px);} 


图 4-80 设置 渐变 的 起 始 位 置 


从 图 4-80 可 以 看 出 , 当 渐 变 的 起 点 和 渐变 的 终点 设置 为 同一 位 置 时 ,将 看 不 到 渐变 
效果 。 另 外 ,如 果 将 图 4-80 从 圆心 处 开始 切 分 成 4 块 , 则 左下 角 和 右 下 角 分 别 为 一 段 1/4 
的 弧 线 ,利用 这 个 特点 ,可 以 制作 出 如 图 4-81 所 示 的 带 有 弧 线 的 圆 角 导航 项 效果 。 具 体 
代码 (4-56. html) 如 下 。 


.box{width: 100px; height: 34px; line- height:34px; font- size:14px; 
text-align:center; color:white; background- color:#39F; 
border- radius:12px 12px 0 0; /* 设置 盒子 左上 和 右上 方 为 圆 角 * / 
position:relative; /* 设置 为 伪 元 素 的 定位 基准 * / 
margin:10px auto;} 

.box: :after, .box: :before{ 
width: 12px; height: 12px; content:""; 


position:absolute; left:100%; top:22px; /* 向 下 偏 移 到 底 端 * / 
background- image: radial- gradient (16px at top right, rgba (255,255,255,0)12px, # 
39f 12px); 


} 
.box: :before{left:-12px; 
background- image: radial- gradient (24px at top left, rgba (255,255,255,0)12px, 
#39£ 12px); 
E 
<div class="box"> 首 页 </div> 
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i " 研究 动态 





图 4-81 带 有 弧 线 的 圆 角 导航 项 ( 右 为 导航 条 ) 


3. 设置 径 向 渐变 的 形状 


如 果 元 素 的 盒子 不 是 正方 形 ,而 是 长 方形 , 则 径 向 渐变 有 两 种 形式 : 一 是 渐变 图 案 随 
盒子 拉 伸 ,显示 为 枯 圆 形 渐变 ; 另 一 种 是 渐变 图 案 不 随 盒子 拉 伸 ,显示 为 圆 形 渐 变 。 例 如 
下 面 代码 (4-57. html) 的 显示 效果 如 图 4-82 所 示 。 


background: radial-gradient (ellipse,white 25%, red); /* 椭圆 形 渐变 ,默认 值 * / 
background: radial- gradient (circle 200px, white 25%, red);  /* 圆 形 渐变 */ 





图 4-82 椭圆 形 渐变 和 圆 形 渐变 


其 中 ,ellipse 是 默认 的 渐变 形状 ,因此 ellipse 也 可 省 略 ,另外 ,设置 了 ellipse 就 不 能 
再 设置 渐变 半径 ,因此 上 例 中 ellipse 后 面 没 接 200px。 因 为 一 旦 设置 了 渐变 半径 ,就 会 自 
动 转 变 成 圆 形 渐变 方式 。 

4. 渐变 中 的 透明 度 设置 

CSS3 渐变 也 支持 透明 度 (transparent) ,可 用 于 创建 减弱 变 淡 的 效果 。 如 果 要 实现 从 
一 种 颜色 到 透明 的 渐变 , 则 可 以 用 rgba() 函 数 来 定义 透明 颜色 节点 。rgba() 函 数 中 第 
4 个 参数 用 来 定义 颜色 的 透明 度 : 0 表示 完全 透明 ,1 表示 完全 不 透明 。 下 面 的 代码 显示 
效果 如 图 4-83 所 示 。 


background: radial- gradient (150px, red, rgba (255,0,0,0)); /* 从 红色 到 透明 的 渐变 * / 


图 4-83 ”从 红色 到 透明 的 渐变 
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5. 多 重 渐变 


background 属性 除了 支持 多 张 背 景 图 以 外 ,还 支持 多 重 渐变 填充 ,此 时 ,多 个 渐变 的 
效果 会 发 生 秋 加 ,形成 多 重 渐变 的 效果 。 此 外 ,利用 background-size 属性 可 将 渐变 图 案 
缩小 或 放大 ,如 图 4-84 所 示 的 各 种 条 纹 图 案 效 果 就 是 用 这 个 方法 制作 的 ,关键 代码 
(4-58. html) 如 下 。 


background- image: linear- gradient (45deg, #555 25%, transparent 25%, 
transparent), linear- gradient (- 45deg, #555 25%, transparent 25$%, transparent), 
linear- gradient (45deg, transparent 75%, #555 75%), linear- gradient (- 45deg, 
transparent 75%, #555 75%);} V# 第 一 个 图 案 * / 
background- image: linear- gradient (transparent 50%, rgba (200, 0, 0, .5) 50%), 
linear- gradient (90deg, transparent 50%, rgba(200, 0, 0, .5)50%); 

/* 第 二 个 图 案 */ 
background- size: 20px 20px; width: 150px; height: 80px; background: #ace; 





图 4-84 使 用 多 重 渐变 制作 各 种 条 纹 图 案 


6. 背景 图 像 与 渐变 背景 共存 


如 果 要 同时 对 一 个 元 素 设置 图 像 背景 和 渐变 背景 , 则 可 以 使 用 如 下 代码 (4-59 
.html) ,需要 注意 的 是 ,这 种 写法 需要 为 渐变 属性 值 添加 -webkit- 前 缀 才 有 效 。 


background:url (images/picl.jpg)no- repeat 50%50%, /x 背景 图 像 * / 
—webkit- linear- gradient (top, rgba(255,255,0, .7), rgba (0,0,0,0)); /* 渐变 背景 * / 


4.8.3 描 边 效果 


外 轮廓 outline 在 页 面 中 呈现 的 效果 和 边框 border 的 效果 极其 相似 ,但 outline 和 
border 是 完全 不 同 的 ,外 轮廓 不 会 占用 网 页 布局 空间 ,不 一 定 是 矩形 ,外 轮廓 属于 一 种 动 
态 样 式 , 只 有 在 元 素 获 取 到 焦点 或 者 被 激活 时 才 会 呈现 。 

如 果 同 时 使 用 outline 和 border 属性 ,就 可 实现 双重 边框 效果 。 代 码 (4-60. html) 如 
下 ,效果 如 图 4-85 左 图 所 示 。 





.box{width: 200px; height: 134px; border-Iradius:16px7 
line-height:84px; text-align:center; 
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border:13px solid red; /* border 的 边框 */ 
outline:5px solid blue; /* outline 的 边框 * / 
margin:16px auto; } 





实现 双重 边框 效果 的 第 二 种 方法 是 同时 使 用 border 和 box-shadow 属性 ,将 上 述 代 
码 中 的 outline 属性 替换 为 以 下 的 box-shadow 属性 , 则 效果 如 图 4-85 右 图 所 示 。 


box-shadow: 0 00 13px #888888; 


| Dl 


人 4 
图 4-85 ”outline 和 box-shadow 制作 的 双重 边框 效果 


可 见 ,outline 制作 的 外 轮廓 边框 只 能 是 矩形 ,要 制作 圆 角 的 外 轮廓 ,只 能 用 box- 
shadow 来 做 。 过 去 ,为 表单 元 素 获得 焦点 时 添加 外 边框 一 般 使 用 outline 实现 ,而 现在 一 
般 使 用 box-shadow 来 实现 。 但 outline 的 优势 是 能 够 被 IE8 浏览 器 支持 。 


4.8.4 人 遮 罩 效果 


CSS3 提供 了 mask 属性 , 它 可 提供 图 片 的 遮 音 效果。 该 属性 在 撰写 本 书 时 仅仅 被 
webkit 内 核 的 浏览 器 支持 ,因此 需要 添加 -webkit- 前 级 。 


1. 使 用 图 片 作 为 遮 罩 层 


- 般 来 说 ,要 实现 遮 置 , 先 要 使 用 mask-image 属性 引用 一 张 有 透明 部 分 的 图 片 (如 
PNG 图 片 ) ,该 图 片 用 于 遮挡 在 HTML 元 素 上 ,被 图 片 透明 部 分 遮 住 的 部 分 将 不 被 显示 ， 
而 被 不 透明 部 分 遮 住 的 部 分 将 被 显示 。 
图 4-86 是 一 个 咕 单 效果 的 例子 ,其 中 遮 单 图 (中 ) 是 一 张 有 透明 区 域 的 PNG 图 片 ,其 
对 应 的 代码 (4-61. html) 如 下 。 


.element { 
width: 200px; height: 66px; padding- top:170px; color: #000; 
background: url (images/swy.jpg); 
—webkit-mask- image: url (images/apple.png); /* 去掉 这 句 就 是 原 图 了 x / 
-webkit-mask- repeat: no- repeat; } /Vx 遮 单 图 像 不 重复 * / 
<div class="element">2012 年 11 月 15…</div> 


mask-size 属性 用 于 改变 遮 罩 图 像 的 大 小 ,与 background-size 属性 类 似 。 
mask-position 用 于 设置 遮 间 图 和 背景 元 素 的 对 齐 关 系 , 如 果 和 希望 遮 单 图 的 中 心 与 背 
景 元 素 的 中 心 对 齐 ,可 使 用 mask-position: 50% 50% 或 mask-position: center。 














外 一 
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下 面 在 4-58. html 的 基础 上 添加 如 下 代码 , 当 鼠 标 滑 动 到 中 单 图 时 , 喧 音 图 以 中 心 点 


为 原点 缩小 为 原来 的 60%。 代 码 如 下 。 
.element { ~ /* 省 略 了 4- 61.html 中 已 有 的 代码 * / 
一 Webkit-mask- Position: center; /* 遮 音 中心 点 * / 


transition: ~webkit-mask- size 1s; } 


.element :hover{-webkit-mask- size: 60%;} 


2. 使 用 渐变 层 作 为 遮 曾 


mask-image 属性 的 值 除 了 可 以 是 图 片 url 之 外 ,还 可 以 是 渐变 填充 (与 background- 
image 属性 类 似 ) ,如 果 用 渐变 填充 遮挡 在 HTML 元 素 之 上 , 则 被 半 透 明 部 分 谈 轩 的 图 片 
也 会 具有 半 透 明 效 果 。 例 如 ,将 4-61. html 中 的 -webkit-mask-image 属性 分 别 改 为 如 下 
值 , 则 显示 效果 如 图 4-87 所 示 。 


-webkit-mask : radial- gradient (100px, red, rgba (55,0,0,0)); 

/* 红色 到 透明 的 径 向 渐变 * / 
—webkit-mask : linear- gradient (black, rgba(55,0,0,0)); 

/* 上 黑 下 透明 的 线性 渐变 x / 





4-87 使 用 渐变 层 作为 遮 音 的 效果 
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说 明 : 除了 可 以 用 gradient 属性 值 制作 渐变 遗 单 层 外 ,也 可 以 使 用 具有 半 透 明 渐 变 
效果 的 PNG 图 片 作为 渐变 遮 单 层 , 都 能 实现 相同 的 效果 。 


4.9 变形 与 动画 效果 
4.9.1 平面 变形 效果 


在 CSS3 中 ,transform 属性 用 于 实现 盒子 的 自由 变形 效果 。transform 的 取 值 主要 
有 以 下 几 种 : 旋转 rotate、 扭 曲 skew 、 缩 放 scale、 移 动 translate ,矩阵 变形 matrix。 


1. 缩放 scale 


scale(X,Y) 用 于 对 元 素 进 行 缩放 ,其 中 X 表示 水 平方 向 缩放 的 倍数 ,Y 表示 垂直 方 
向 缩放 的 倍数 ,Y 值 也 可 省 略 ,此 时 表示 X、Y 方向 放大 的 倍数 相同 。 例 如 : 


transform:scale (2,1.5); /元 素 在 水 平方 向 放大 到 2 倍 ,垂直 方向 放大 到 1.5 倍 * / 
transform:scale(1.1) /* 元 素 在 水 平和 垂直 方向 均 放大 到 1.5 倍 * / 


如 果 只 希望 在 X 轴 或 立轴 进行 缩放 ,可 使 用 scaleX 或 scaleY ,例如 : 
transform:scalex (2); /* 该 语句 等 价 于 transform:scale (2,1);*/ 


默认 情况 下 ,元 素 缩放 的 基点 位 于 元 素 中 心 位 置 ,可 以 通过 transform-origin 对 基点 
进行 设置 。 例 如 : 


transform- origin: top left; /* 设置 缩放 点 为 左上 角 */ 
transform- origin: 0 50%; /* 设 置 缩放 点 为 正 左 边 ,水 平 0, 垂 直 50%*/ 


下 面 是 一 个 例子 (4-62. html) , 当 鼠 标 悬 停 时 ,图 片 将 放大 显示 。 


.main img{ height: 255px; width: 248px; overflow:hidden;position: relative;} 
main img img { transition: all .3s ease- in; 


transform- origin: top;} /* 设置 缩放 点 为 正 上 方 * / 
-main img:hover img {opacity: .7; transform:scale(1.5); } 


<div class="main img"><img src="img/61.jpg"></div> 


2. 旋转 rotate 


rotate(angle) 用 于 对 元 素 进行 一 个 平面 上 指定 角度 的 旋转 ,其 中 angle 是 指 旋转 角 
度 ,如 果 设 置 的 值 为 正 数 , 则 表示 顺 时 针 旋 转 ; 如 果 设 置 的 值 为 负数 , 则 表示 逆 时 针 旋 转 。 
默认 情况 下 ,元 素 旋转 的 基点 位 于 元 素 的 中 心 位 置 , 可 以 通过 transform-origin 属性 设置 
基点 位 置 。 
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transform:rotate (30deg); 


3. 移动 translate 


translate 属性 值 用 于 对 元 素 进行 移动 ,移动 可 分 为 3 种 方式 : translateX(x) 仅 水 平 
方向 移动 (X 轴 移 动 ) :translateY(y) 仅 垂直 方向 移动 (Y 轴 移 动 ) :translate(x,y) 表 示 水 
平方 向 和 垂直 方向 同时 移动 。 例 如 : 


transform:translatexXx (50%); 
transform:translate (50%, 30%); 


4. 扭曲 skew 


skew 属性 值 用 于 对 元 素 进行 斜 切 或 扭曲 ,也 可 分 为 3 种 方式 : skew(x,y) 使 元 素 在 
水 平和 垂直 方向 同时 扭曲 (X 和 Y 轴 同 时 按 一 定 角度 值 扭曲 变形 );skewX(x) 仅 使 元 素 
在 水 平方 向 扭曲 变形 ;skewY(y) 仅 使 元 素 在 垂直 方向 扭曲 变形 。 例 如 : 


transform: skew (45deg,15deg); 


5. 同时 应 用 多 种 变形 效果 


如 果 对 transform 属性 设置 多 个 属性 值 (注意 多 个 属性 值 之 间 必须 用 空格 分 离 ), 就 
能 对 元 素 同时 应 用 多 种 自由 变形 的 效果 了 。 例 如 : 


transform: rotate (45deg) scale (0.8,1.2)skew (60deg,— 30deg); 


注意 : 设置 了 transform 的 元 素 一 般 会 登 放 在 其 他 元 素 的 上 方 。 
6. 制作 可 伸缩 的 下 画 线 


图 4-88 所 示 的 是 一 个 导航 条 ,默认 情况 下 ,导航 条 没有 下 画 线 , 当 鼠 标 悬 停 时 ,会 逐 
渐 出 现 一 条 从 中 心 向 两 端 延伸 的 下 画 线 。 该 实例 的 制作 思路 是 : 用 一 个 伪 元 素 的 下 边框 
表示 下 面 线 ,初始 状态 下 ,使 用 scaleX(0) 函 数 将 该 元 素 缩 放 为 0, 悬 停 状 态 下 ,使 用 
scaleX(1) 函 数 将 该 元 素 缩 放 为 1, 再 配合 transition 属性 实现 过 渡 效 果 。 代 码 (4-63 
.html) 如 下 。 


#nava { 

Color:#333; text-align: center; text- decoration: none; 

display: block; padding:6px 10px 4px; margin:0 2px; 

float:left; position: relative; /=#* 作为 伪 元 素 的 定位 基准 * /} 
#nav a:after { 


position: absolute; left: 0; bottom: -7Px7 width: 100%; 
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content : ""; border-bottom: 2px solid #ff5a5a; /< 下 画 线 * / 
transform: scaleX(0) 7 7Vx# 缩小 到 0x / 
transform- origin: 50%50%; /从 元 素 的 中 心 点 开始 缩放 ,可 调整 参数 试 试 * / 
transition:transform 0.3s ease— out;} 
#nav a:hover:after {transform: scaleXx(1);} /* 放 大 到 1x*/ 
<div id="nav"><a href="#"> 首 页 </a><a href="#"> 中 心 简介 </a>…</div> 











首页 中心 第 人 整 逆 常用 下 载 ”为 您 服务 。 中 心 蝴 介 











图 4-88 带 有 可 伸缩 下 画 线 的 导航 条 
说 明 : 本 实例 如 果 不 需 要 下 画 线 的 拉 伸 效果 , 则 可 以 直接 用 a 元 素 的 下 边框 来 做 ,本 
例 由 于 元 素 的 下 边框 拉 伸 ,而 内 容 不 能 拉 伸 。 因 此 下 边框 和 内 容 必须 分 别 是 一 个 元 素 。 
7. 制作 图 片 墙 


照片 墙 可 以 让 我 们 将 收集 的 照片 用 网 页 展示 出 来 ,图 4-89 是 一 个 照片 墙 ,该 实例 主 
要 应 用 了 CSS3 中 的 旋转 、 缩 放 和 阴影 等 效果 ,实现 照片 的 不 规则 排列 , 当 鼠 标 移动 到 某 
张 照片 上 时 ,照片 还 会 出 现 放 大 的 效果 。 





图 4-89 图 片 墙 效果 


该 实例 的 结构 代码 (4-64. html) 如 下 。 


<div class="content"> 
<img class="picl" src="img/1.jpg" /> 
<img class="pic2" src="img/2.jpg" /> 


<img class="picl0" src="img/10.jpg" /> 
</div> 


CSS 样式 主要 是 对 body 元 素 设置 背景 图 片 ,再 对 各 张 图 片 设置 大 小 、 位 置 和 旋转 角 
度 等 ,以 及 鼠标 滑 过 时 放大 ,出 现 阴 影 的 过 渡 效 果 。CSS 代码 如 下 。 


body{ 
background: url (../img/bg1.jpg)no- repeat top center fixed; 
background- size: 100%auto; /* 让 背景 图 像 左右 撑 满 浏览 器 * /} 
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.content{ 
width: 900px; height: 1000px; overflow: hidden; margin: 100px auto; 
position: relative; /* 设 置 为 展示 图 片 的 定位 基准 * /} 
img{ 
z-index: 1; width: 20%; /* 设 置 图 片 初始 大 小 为 20%* / 


height: auto; position: absolute; 
padding: 10px 10px 15px 10px; background: #ffffff; 


border: lpx solid #ccc; /* 给 图 片 加 边框 * / 
-moz-transition: 0.5s; /* 动画 的 持续 时 间 x / 


-webkit-transition: 0.5s; transition: 0.5s; } 
img:hovert{ 
z-index: 2; /* 鼠标 滑 过 时 置 于 顶层 * / 
transform: scale(1.5); /< 放大 到 1.5 倍 * / 
一 moz-transform: scale(1.5); 
—webkit- transform: scale(1.5)7 
box- shadow: —10px 10px 20px #000000; 
-Imoz-box- shadow: -10px 10px 20px #000000; 
一 webkit-box- shadow: — 10px 10px 20px #000000; } 
.picl{ 
left: 100px; top: 50px; -webkit-transform: rotate (20deg); 
/* 旋 转 20* / 
-moz- transform: rotate (20deg); transform: rotate (20deg);} 
.pic2{ 
left: 280px; top: 60px; -webkit-transform: rotate (-10deg) 
-moz-transform: rotate (-10deg) transform: rotate(-10deg);} 


/x .pic3 到 .pic10 的 代码 与 .picl 类 似 , 故 省 略 * / 


提示 : zoom 和 transform:scale 两 个 属性 都 可 对 元 素 进 行 缩放 ,但 区 别 是 很 明显 的 。 

(1) zoom 的 缩放 是 相对 于 左上 角 的 , 且 无 法 改变 ,而 scale 默认 是 居中 缩放 , 且 可 以 
改变 缩放 的 原 

(2) zoom 缩放 会 改变 元 素 占据 的 空间 大 小 ,而 scale 不 会 ,因此 页 面 布 局 不 会 发 生 
变化 ; 

(3) zoom 只 能 等 比例 缩放 ,而 scale 支持 义 轴 、Y 轴 不 等 比例 缩放 ; 

(4) zoom 的 取 值 只 能 是 小 数 或 百分比 ,如 zoom:0.5, 而 scale 不 支持 百分比 ,只 能 是 
数字 ,并 且 还 可 以 是 负数 。 








了 


4.9.2 3D 变换 效果 


CSS3 提供 了 3D 变换 效果 的 功能 模块 ,使 HTML 元 素 对 象 能 在 浏览 器 中 呈现 出 三 
维 变 换 的 效果 ,配合 hover 伪 类 和 transition 属性 ,还 能 实现 三 维 动画 效果 。 
由 于 3D 变换 是 在 三 维 空间 上 的 变换 .其 涉及 如 图 4-90 所 示 的 三 维 立体 坐标 轴 。 其 
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中 ,X 轴 是 指 屏幕 的 水 平方 向 ,Y 轴 是 指 屏 幕 的 垂直 方向 ,而 Z 轴 是 指 垂直 于 屏幕 所 在 平 
面 的 轴 。 


ed 





浏览 器 窗口 


二 
图 4-90 三 维 立 体 坐 标 轴 


1. 三 维 旋转 属性 值 


三 维 旋转 属性 包括 如 下 3 个 属性 : 

。 rotateX(angle) 一 一 围绕 X 轴 旋 转 ,比如 人 在 单 丁 上 旋转 。 

。 rotateY(angle) 一 一 围绕 Y 轴 旋 转 ,比如 和 人 跳 钢 管 舞 时 的 旋转 。 

。 rotateZ(angle) 围绕 Z 轴 旋 转 , 比 如 抽奖 大 转盘 的 旋转 。 

下 面 是 这 3 个 属性 应 用 的 示例 代码 (4-65. html) ,效果 如 图 4-91 所 示 。 





div{ 
width:120px; line-height:80px; text-align:center; 
display:inline-block; background:#FcF; border:2px solid #900; 
border- radius:10px; margin:50px auto; 
transition: all 1s ease- in; /= 设置 过 渡 效 果 * / 下 
.r2d:hover{transform:rotate (180deg);} 
.r3dxX:hover{transform:rotateXx (135deg) ;} 
.Ir3dY:hover{transform:rotateY (135deg);} 
.r3dZ:hover{transform:rotateZz (180deg);} 
<div class="r2d">2D 旋转 </div><div class="r3dx">3D XxX 轴 旋 转 < /div> 
<div class="r3dY"> 3D Y 轴 旋 转 < /div><div class="r3dz">3D 2z 轴 旋 转 < /div> 


2. 透视 属性 perspective 
perspective 属性 的 值 可 以 决定 元 素 3D 变形 效果 的 强 弱 , 其 原理 是 我 们 观察 三 维 物 
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图 4-91 三 维 旋转 属性 示例 


体 时 ,有 一 种 近 大 远 小 的 效果 。perspective 属性 定义 透视 点 距 3D 元 素 的 距离 ,以 像素 
计 。 默 认 情 况 下 ,透视 点 位 于 Z 轴 上 ,并 且 是 在 元 素 中 心 点 的 正 前 方 ,如 图 4-92 所 示 。 





perspective 


图 4-92 perspective 属性 示意 图 


由 于 3D 场景 都 会 涉及 视角 和 透视 的 问题 ,如 果 不 使 用 perspective 属性 , 则 镜头 方向 
只 能 是 平行 于 Z 轴 向 屏幕 内 ,也 就 是 从 元 素 的 正 前 方向 元 素 里 面 看 。 如 果 对 元 素 的 父 元 
素 设置 perspective 属性 ,就 相当 于 添加 了 一 个 3D 场景 ,此 时 元 素 在 视觉 上 将 产生 近 大 远 
小 的 效果 ,从 而 使 3D 效果 更 加 到 真 ,但 元 素 本 身 的 尺寸 并 不 会 发 生变 化 。 

下 面 是 一 个 例子 ,div 元 素 未 旋转 时 如 图 4-93 左 图 所 示 , 对 该 div 元 素 进行 绕 Y 轴 旋 
转 45", 当 不 使 用 perspective 时 ,元 素 旋转 后 的 效果 如 图 4-93 右 图 所 示 , 当 对 其 父 元 素 使 
用 perspective 时 ,元 素 的 效果 如 图 4-93 下 图 所 示 。 代 码 (4-66. html) 如 下 。 


.container{perspective: 500px; } 
-box{ 

border:solid lpx #000; background:#0066FF; 

margin:100px auto; width:310px; 

padding:10px; border- radius:8px; 

transition:all 1.5s;} 
.box:hover{transform- style: preserve- 3d; transform: rotateY (- 45deg); } 
<div class="container"> 

<div class="box" ><img src="images/jxwy.jpg" width="310" /></div> 
</div> 


3. 3D 平移 属性 


CSS 中 3D 平移 的 属性 值 有 translateX(x) ,translateY(y) ,translateZ(z) ,分 别 表 示 
在 X 轴 、Y 轴 和 ZZ 轴 进 行 平移 。 
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图 4-93 ”使 用 perspective 后 的 旋转 效果 ( 左 为 原 图 ) 


其 中 translateZ() 表 示 在 Z 轴 进 行 平 移 , 当 其 值 为 正 时 ,表示 元 素 将 移动 到 屏幕 的 前 
方 , 也 就 是 朝 浏 览 者 的 眼睛 方向 移动 ,因此 当 设置 了 perspective 属性 时 ,再 设置 
translateZ() 值 为 正 会 使 元 素 越 来 越 大 ( 近 大 远 小 的 原理 ); 当 translateZ() 值 接近 
perspective 属性 值 时 ,元 素 将 占 满 整 个 屏幕 ,这 是 因为 视点 (眼睛 ) 和 物体 挨 得 很 近 时 , 眼 
上 晴 看 到 的 视野 完全 被 物体 挡住 了 ,所 谓 “ 一 叶 障 目 不 见 泰山 "就 是 这 个 道理 。 

但 当 translateZ 的 值 大 于 perspective 值 时 ,元素 将 不 可 见 , 因 为 此 时 元 素 移 到 浏览 者 
眼睛 后 面 去 了 ,浏览 者 是 无 法 看 到 自己 眼睛 后 面 的 东西 的 。 在 上 例 中 添加 如 下 代码 即 可 
测试 translateZ 方法 的 效果 。 


.box:hover{transform: translatez (488px) ;} /* 调整 该 值 为 600px 再 试 试 * / 


4. 3D 缩放 属性 


CSS 中 3D 缩放 的 属性 值 有 scaleX(x) ,scaleY(y) .scaleZ(z) ,分 别 表示 在 X 轴 、Y 轴 
和 2Z 轴 进 行 缩放 。 


5. 制作 立方 体 


综合 应 用 3D 变换 的 各 种 属性 ,可 制作 出 如 图 4-94 所 示 的 立方 体 。 代 码 (4-67. html) 
如 下 。 


-box { 
width: 200px; line - height: 200px; height: 200px; text - align: center; font— 


size: 64px; 
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图 4-94 立方 体 效 果 


以 上 代码 中 ， 
(1) 由 于 box 中 有 多 个 元 素 , 必 须 设置 transform-style: preserve-3d, 用 于 定义 子 元 
素 保留 3D 位 置 , 否 则 多 个 元 素 会 在 同一 个 平面 上 。 
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(2) 立方 体 的 长 宽 高 都 是 200px, 通 过 将 “前 ”面向 屏幕 前 方 平移 了 100px,“ 后 ”面向 
屏幕 后 方 平移 100px, 从 而 使 立方 体 的 正中 心 位 于 屏幕 所 在 平面 上 。 

(3)“ 左 ? 面 和 * 右 ? 面 因为 沿 Y 轴 旋 转 了 90" 和 一 90", 整 个 面 都 位 于 屏幕 前 方 , 因 此 均 
向 屏幕 后 方 平移 了 100px。 


6. 设置 视点 聚焦 位 置 


默认 情况 下 ,视点 聚焦 位 置 位 于 元 素 的 正中 心 ,可 以 使 用 perspective-origin 属性 改 
变 视 点 聚焦 的 位 置 ,代码 如 下 : 


perspective-origin:90% 20px; /* 视点 位 置 位 于 X 轴 的 20% 与 Y 轴 的 20px 交界 处 * / 


4.9.3 animation 动画 效果 


CSS3 提供 了 animation 属性 ,用 来 实现 动画 效果 ,与 transition 属性 需要 事件 触发 动 
画 效 果 相 比 ,animation 属性 不 需要 任何 事件 触发 就 能 播放 动画 。 例 如 ,可 利用 CSS3 动 
画 来 制作 loading 图 标 , 因 为 这 比 GIF 动画 文件 更 小 巧 。 


1.@keyframes 和 animation 属性 原理 


animation 属性 制作 动画 主要 依赖 关键 帧 : @keyframes, 每 个 关键 帧 表示 动画 过 程 
中 的 一 个 关键 状态 ,这 与 Flash 动画 的 实现 原理 相似 。 不 同 关键 帧 是 通过 from( 相 当 于 
0%) \to( 相 当 于 100%) 或 百分比 来 定义 的 (为 了 得 到 最 佳 的 浏览 器 支持 ,建议 使 用 百 分 
比 )。 

@keyframes 的 语法 如 下 : 


@ keyframes 动画 名 { 
from 或 ns{CSS 样式 规则 } … to 或 ns{ 样 式 规则 }} 


下 面 定义 了 一 个 动画 ,其 效果 是 让 一 个 元 素 沿 着 一 个 正方 形 的 轨迹 发 生 移动 ,移动 过 
程 中 还 会 伴随 颜色 的 变化 。 


@keyframes myfirst { /x* 定义 动画 名 * / 
0%{background:red; left:0; top:0;} /* 定义 起 始 帧 样式 ,0$ 可 换 成 fromx / 
25%{background:yellow; left:200px; top:0px;} 
50%{background:blue; left:200px; top:200px;} 
75%{background:green; left:0px; top:200px;} 
100%{background:red; left:0; top:0;} /* 定义 结束 帧 样式 ,100% 可 换 成 tox / 

} 


@keyframes 定义 好 后 ,必须 通过 animation 属性 把 它 绑 定 到 一 个 选择 器 。@Kkeyframes 
是 通过 “动画 名 ” 绑 定 到 animation 属性 的 。animation 属性 完整 的 写法 如 下 。 
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animation- name:myfirst; /* 绑 定 同名 的 ekeyframesx / 
animation- duration:5s; /* 规定 动画 的 一 个 周期 的 持续 时 间 * / 
animation-timing- function:linear; /* 规定 动画 的 速度 曲线 ,默认 是 easex / 
animation- delay:1s; /* 规定 动画 开始 前 的 延迟 时 间 * / 
animation- iteration- count:infinite; /* 规定 动画 的 播放 次 数 * / 

animation- direction:alternate; /* 规定 动画 在 下 一 周期 是 否 逆向 播放 x* / 
animation-play- state:running; /* 规定 动画 是 运行 还 是 暂停 * / 


animation- fill-mode:forwards; 


/* 动画 播放 完 时 回 到 动画 播放 前 的 状态 还 是 保留 动画 播放 后 的 状态 * / 


animation 属性 支持 简写 形式 ,上 述 所 有 代码 可 以 简写 为 : 


animation:myfirst 5s linear 2s infinite alternate; 


animation-play- state:running; 


该 实例 主要 的 HTML 和 CSS 代码 (4-68. html) 如 下 ,运行 效果 如 图 4-95 所 示 。 


div{ 
width:100px; height:100px; background:red; 
position:relative; /* 相对 于 原来 的 位 置 * / 
animation:myfirst 5s linear 2s infinite alternate; 1 
@keyframes myfirst{ /* 加 入 上 述 8@ keyframes 中 的 代码 * /} 
<div></div> <!- -作为 运动 方块 的 元 素 --> 


图 4-95 4-68. html 的 运行 示意 图 


2. 连续 播放 两 个 动画 
如 果 要 在 一 个 元 素 上 绑 定 两 个 动画 效果 ,并 让 两 个 动画 连续 播放 ,可 对 animation 各 





属性 分 别 设置 两 个 属性 值 。 例 如 下 面 的 代码 (4-69. html) 可 实现 小 球 垂直 落下 然后 弹跳 
几 次 的 效果 ,如 图 4-96 所 示 。 
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@ keyframes Effectli{ 
0%{ transform:translateY (0px); opacity:0;} 





图 4-96 4-69. html 的 运行 示意 图 


可 见 ,设置 animation-direction: alternate 可 实现 元 素来 回 运动 的 效果 。 将 第 2 个 动 
画 的 延迟 时 间 设 置 成 第 1 个 动画 的 持续 时 间 ,可 实现 第 2 个 动画 接着 第 1 个 动画 播放 。 


3. 制作 图 片 轮 播 效果 


图 片 轮 播 是 指 几 张 图 片 在 同一 区 域 中 ,按照 一 定 的 顺序 交替 循环 显示 ,本 实例 可 实现 
自动 轮 播 ` 淡 入 淡出 的 渐变 效果 ,但 不 能 实现 点 击 图 片 切换 。 
该 实例 的 结构 代码 (4-70. htmlD 如 下 。 





为 了 让 5 张 图 片 琶 放 在 一 起 ,必须 把 这 5 张 图 片 所 在 的 a 元素 设置 为 绝对 定位 ,然后 
把 包含 框 mgsBox 元 素 设 置 为 相对 定位 ,作为 5 张 图 片 的 定位 基准 。CSS 代码 如 下 。 
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.imgsBox a {display: block; width: 100%; height: 100%; Position: absolute left: 0; 
top:0; 

opacity:0; 

animation-timing- function: linear; 

animation- name:fade; 

animation- iteration- count: infinite; 

animation- duration: 20s;} 

.imgsBox a:nth- child(1) {animation- delay: -1s; } 

.imgsBox a:nth- child(2) {animation-delay: 3s;}  ”/* 每 张 图 片 动画 间隔 时 间 为 4sx / 
.imgsBox a:nth- child(3) {animation- delay: 7s; } 

.imgsBox a:nth- child(4) {animation- delay: 11s;} 

.imgsBox a:nth- child(5) {animation- delay: 15s; } 


@keyframes fade t /定义 动画 名 * / 
0%{opacity:0; z-index:2;} 

5%{opacity:1; z-index: 1;} /* 0- 5$ 为 图 片 的 渐 现 阶段 * / 
20%{opacity:1;z-index:1;} /* 5-20% 为 图 片 的 停留 阶段 x / 
25%{opacity:0;z- index:0;} /* 20- 25s 为 图 片 的 渐 隐 阶段 * / 


100%{opacity:0;z- index:0;}} 


上 述 代码 中 ,定义 整个 动画 时 长 为 20s, 有 5 张 图 片 ,因此 有 4 个 图 片 过 渡 效 果 。 每 
个 过 渡 效 果 分 为 3 个 阶段 : 前 1s 为 渐 现 ,中 间 3s 时 长 为 停留 ,后 1s 为 渐 隐 。 因 此 每 个 过 
渡 效 果 是 5s,4 个 过 渡 效 果 就 是 20s。 

也 可 这 样 理解 : 虽然 每 张 图 片 的 动画 时 长 是 5s, 但 前 一 张 图 片 的 渐 隐 过 程 和 后 一 张 
图 片 的 渐 现 过 程 是 同时 进行 的 。 即 前 一 张 图 片 只 播放 4s, 后 一 张 图 片 就 开始 播放 ,因此 
每 张 图 片 的 动画 时 间 间 隔 是 4s。 又 因为 第 1 张 图 片 的 播放 不 需要 渐 现 过 程 ,所 以 设置 它 
的 动画 延迟 是 一 1s, 表 示 从 第 2s 开始 播放 。 


习 题 


1. 下 列 哪 条 是 定义 CSS 样式 规则 的 正确 形式 ? ( ) 


A. body {color= black)} B. body:color= black 

C. body {color:black} D. {body;color:black} 
2. 下 面 哪 种 方式 不 是 CSS 中 颜色 的 表示 法 ? ( ) 

A. #ffffff B. rgba(255,0,0,.1) 

C. rgb(ff,ff,ff) D. white 


3. 关于 CSS3 中 的 背景 属性 ,下 列 说 法 正确 的 是 ( 小 
A. 不 可 以 改变 背景 图 片 的 原始 尺寸 大 小 
B. 不 可 以 对 一 个 元 素 设置 两 张 背 景 图 片 
C. 可 以 对 一 个 元 素 同时 设置 背景 颜色 和 背景 图 片 
D. 在 默认 情况 下 背景 图 片 不 会 平 铺 ,左上 角 对 齐 
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4. 下 列 哪个 CSS 属性 具有 继承 性 ? ( ) 
A. opacity B. background-color 
C. display D. margin 
5.CSS 中 定义 . outer {background-color: red;) 表示 的 是 ( Xs 
A. 网 页 中 某 一 个 id 为 outer 的 元 素 的 背景 色 是 红色 的 
B. 网 页 中 含有 class 二 "outer" 元 素 的 背景 色 是 红色 的 
C. 网 页 中 元 素 名 为 outer 元 素 的 背景 色 是 红色 的 
D. 网 页 中 含有 class 一 ". outer" 元 素 的 背景 色 是 红色 的 
6. 在 CSS3 中 ,使 用 transform 属性 可 以 实现 变形 效果 。 下 列 选项 中 ,能 够 实现 元 素 
缩放 的 函数 是 ( 和 


A. translate() B. scale() C. skew() D. rotate() 
7. 当 perspective 属性 值 小 于 ( ) 属 性 值 时 ,元 素 将 不 可 见 
A. rotateZ() B. scaleZ() C. skewZ() D. translateZ() 


8. 举例 说 出 3 个 上 下 边界 (margin) 的 浏览 器 默认 值 不 为 0 的 元 素 








9. css 中， 继承 是 一 种 机 制 , 它 允许 样式 不 仅 可 以 应 用 于 某 个 特定 的 元 素 , 还 可 以 应 
用 于 它 的 

10. 疝 果 要 使 网 页 中 的 背景 图 片 不 随 网 页 滚动 ， 应 设置 的 CSS 声明 是 

11. 设 #title{padding: 6px 10px 4px}, 则 id 为 title 的 元 素 左 填充 是 

12. 如 果 要 使 下 面 代 码 中 的 文字 变 红色 , 则 应 填 入 : 





<h2 > 课程 资源 < /h2> 

13. 在 CSS 中 , transition 表示 ;translate 表示 ;transform 表示 
;animation 表示 ,其 中 是 属性 值 。 

14. background-attachment 属性 的 取 值 有 、 

15. @keyframes 后 的 动画 名 必须 和 属性 的 属性 信 关联 起 来 。 


16. 简 述 用 DW 新 建 一 条 CSS 样式 规则 的 过 程 。 

17. 如 何 用 选择 器 选中 一 系列 兄弟 元 素 中 除 第 一 元 素 外 的 其 他 所 有 元 素 ? 

18. 有 些 网 页 中 , 当 鼠 标 滑 过 时 , 超 链接 的 下 画 线 是 虚线 ,你 认为 这 是 怎么 实现 的 ? 
19. 如 何 用 Chrome 浏览 器 的 “检查 ”功能 ,为 元 素 临时 添加 某 条 样式 ? 

20. 写 出 下 列 选择 器 的 类 型 和 作用 。 

(1) a:hover 

(2) a. hover 

(3) a:hover b 

(4) a.hover b 

21. 利用 CSS 盒子 模型 属性 ,在 网 页 中 分 别 绘制 出 如 图 4-97 所 示 的 5 个 盒子 效果 。 
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图 4-97 5 个 盒子 效果 
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第 5 章 CSS 布局 


网 页 本 质 上 是 一 种 在 浏览 器 上 完成 的 平面 设计 作品 ,网 页 布局 就 是 将 网 页 元 素 合理 
排列 在 网 页 版 面 上 ,达到 美观 大 方 、 井 然 有 序 的 效果 。 使 用 CSS 进行 网 页 布局 ,本 质 是 利 
用 标准 流 ,浮动 或 定位 属性 的 性 质 对 网 页 布局 元 素 进行 合理 排列 。 


5.1 浮动 


在 标准 流 中 , 块 级 元 素 的 盒子 都 是 上 下 排列 ,行内 元 素 的 盒子 都 是 左右 排列 ,如 果 仅 仅 
按照 标准 流 的 方式 进行 排列 ,就 只 有 这 几 种 可 能 性 ,限制 太 大 。CSS 的 制定 者 也 想到 了 这 样 
排列 限制 的 问题 ,因此 又 给 出 了 浮动 和 定位 方式 ,从 而 使 排版 的 灵活 性 大 大 提高 。 

如 果 和 希望 相 邻 的 块 级 元 素 盒子 左右 排列 (所 有 盒子 浮动 ) 或 者 希望 一 个 盒子 被 男 一 个 
盒子 中 的 内 容 所 环绕 (一 个 盒子 浮动 ) 做 出 图 文 混 排 的 效果 ,这 时 最 简单 的 实现 办 法 就 是 
运用 浮动 (float) 属 性 使 盒子 在 浮动 方式 下 定位 。 





5.1.1 盒子 浮动 后 的 特点 


在 标准 流 中 ,一 个 块 级 元 素 在 水 平方 向 会 自动 伸展 ,在 它 的 父 元 素 中 占 满 整个 一 行 ， 
而 在 竖 直 方向 和 其 他 元 素 依 次 排列 ,不 能 并 排 , 如 图 5-1 所 示 。 使 用 “ 淫 动 ”方式 后 ,这 种 
排列 方式 就 会 发 生 改 变 。 

















图 5-1 3 个 盒子 在 标准 流 中 


CSS 中 有 一 个 float 属性 ,默认 值 为 none: 也 就 是 标准 流通 常 的 情况 ,如 果 将 float 属 
性 的 值 设 为 left 或 right, 元 素 就 会 向 其 父 元 素 的 左 侧 或 右 侧 靠近 ,同时 盒子 的 宽度 不 再 
伸展 ,而 是 收缩 ,在 没 设置 宽度 时 ,会 根据 盒子 里 面 的 内 容 来 确定 宽度 。 

下 面 通过 一 个 实验 来 演示 浮动 的 作用 ,基础 代码 (5-1. html) 如 下 ,这 个 代码 中 没有 使 
用 浮动 , 它 的 显示 效果 如 图 5-1 所 示 。 


《HTML5+CSS3 Web 前 端 开发 》 





div{ 
padding:10px; margin:10px; border:1px dashed #111; 
background- color :#90baff; 1 
.father{ 
background- color:#ff9; border:lpx solid #111; } 
<div class="father"> 
<div class="sonl1">Box- 1</div> 
<div class="son2">Box- 2< /div> 
<div class="son3">Box- 3</div> 
</div> 


1. 一 个 盒子 浮动 


接 下 来 在 上 述 代 码 中 添加 一 条 CSS 代码 ,使 Box-1 盒子 浮动 。 代 码 (5-2. html) 如 下 : 


.sonl{float:left;} 


此 时 显示 效果 如 图 5-2 所 示 ,可 发 现在 给 Box-1 添加 浮动 属性 后 ,Box-l 的 宽度 不 再 
自动 伸展 ,而 且 不 再 占据 原来 浏览 器 分 配给 它 的 位 置 。 如 果 再 在 未 浮动 的 盒子 Box-2 中 
添 一 行文 本 ,就 会 发 现 Box-2 中 的 内 容 是 环绕 着 浮动 盒子 的 ,如 图 5-3 所 示 。 




















图 5-2 ”第 一 个 盒子 浮动 图 5-3 增加 第 二 个 盒子 的 内 容 


总 结 : 设置 元 素 浮动 后 ,元素 发 生 了 如 下 一 些 改变 : 

(1) 浮动 后 的 盒子 将 以 行内 块 (inline-block) 元 素 显示 , 即 宽度 会 自动 收缩 ,但 保持 块 
级 元 素 的 其 他 性 质 。 

(2) 浮动 的 盒子 将 脱离 标准 流 , 即 不 再 占据 浏览 器 原来 分 配给 它 的 位 置 。 

(3) 未 浮动 的 盒子 将 占据 浮动 盒子 的 位 置 ,同时 未 浮动 盒子 内 的 内 容 会 环绕 浮动 后 
的 盒子 。 

提示 : 所 谓 “ 脱 离 标准 流 ”, 是 指 元 素 不 再 占据 在 标准 流下 浏览 器 分 配给 它 的 空间 ,其 
他 元 素 就 好 像 这 个 元 素 不 存在 一 样 。 例 如 在 图 5-2 中 , 当 Box-1 浮动 后 ,Box-2 就 项 到 了 
Box-1l 的 位 置 ,相当 于 Box-2 视 Box-1 不 存在 一 样 。 但 是 ,浮动 元 素 并 没有 完全 脱离 标准 
流 , 这 表现 在 浮动 金子 会 影响 未 浮动 盒子 中 内 容 的 排列 ,例如 Box-2 中 的 内 容 会 跟 在 
Box-1 盒子 之 后 进行 排列 ,而 不 会 忽略 Box-1 盒子 的 存在 。 
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2. 多 个 盒子 浮动 
在 Box-l 浮动 的 基础 上 再 设置 Box-2 也 左 浮动 ,代码 (5-3. html) 如 下 : 


.son2{float:left;} 


此 时 显示 效果 如 图 5-4 所 示 ( 在 Box-3 中 添加 了 | ; 
一 行文 本 )。 可 发 现 Box-2 盒子 浮动 后 仍然 遵 特 上面。 这 内 加 家 入 加 者 看 万 加 
浮动 的 规律 , 即 Box-2 的 宽度 也 不 再 自动 伸展 ,而 且 不 
再 占据 原来 浏览 器 分 配给 它 的 位 置 。 

如 果 将 Box-1 的 浮动 方式 改 为 右 浮动 , . sonl 
{float:right}, 则 显示 效果 如 图 5-5 所 示 ,可 看 到 Box-2 
移动 到 了 Box-1 的 前 面 ,这 说 明 元 素 浮动 后 其 显示 顺 。。 图 54 设置 两 个 盒子 浮动 
序 和 它们 在 代码 中 的 位 置 可 能 并 不 一 致 。 

接 下 来 设置 Box-3 也 左 浮动 : . son3{float:left}, 则 显示 效果 如 图 5-6 所 示 。 可 发 现 
3 个 盒子 都 浮动 后 ,就 产生 了 块 级 元 素 水 平 排列 的 效果 。 同 时 由 于 都 脱离 了 标准 流 , 导 至 
其 父 元 素 中 的 内 容 为 空 。 
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图 5-5 改变 浮动 方向 图 5-6 3 个 盒子 都 浮动 



































对 于 多 个 盒子 浮动 ,除了 每 个 浮动 盒子 都 遵循 单个 盒子 浮动 的 规律 外 ,还 有 以 下 两 条 
规律 : 

(1) 多 个 浮动 元 素 不 会 相互 重 伙 ,一 个 浮动 元 素 的 外 边界 (margin) 磁 到 男 一 个 浮动 
元 素 的 外 边界 后 便 停 止 运动 。 

(2) 若 包 含 的 容器 太 罕 ,无 法 容纳 水 平 排列 的 多 个 浮动 元 素 ,那么 最 后 的 浮动 盒子 会 
向 下 移动 ( 见 图 5-7)。 但 如 果 浮 动 元 素 的 高 度 不 同 , 那 当 它们 向 下 移动 时 可 能 会 被 卡 住 
( 见 图 5-8) 。 





























5-7 没有 足够 的 水 平 空间 5-8 被 Box-1 卡 住 了 
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5.1.2 清除 浮动 元 素 的 影响 


clear 是 清除 浮动 属性 , 它 的 取 值 有 left、right、both 和 none( 默 认 值 ) 。 如 果 设 置 盒子 
的 clear 属性 值 为 left 或 right, 表 示 该 盒子 的 左边 或 右边 不 允许 有 浮动 的 元 素 。 值 设置 
为 both 则 表示 两 边 都 不 允许 有 浮动 元 素 , 因 此 该 盒子 将 会 在 浏览 器 中 另 起 一 行 显示 。 

例如 ,在 图 5-5 两 个 盒子 浮动 的 基础 上 ,设置 Box-3 清除 浮动 , 即 在 5-1. html 基础 上 
设置 如 下 CSS 代码 (5-4. html) ,效果 如 图 5-9 所 示 。 


.sonl{float:right;} -Son2{float:left;} 
.son3{clear:both;} 


可 以 看 到 ,对 Box-3 清除 浮动 (clear:both; ) ,表示 Box-3 的 左右 两 边 都 不 允许 有 浮动 
的 元 素 , 因 此 Box-3 移动 到 了 下 一 行 显示 。 

实际 上 ,clear 属性 既 可 以 用 在 未 浮动 的 元 素 上 ,也 可 以 用 在 浮动 的 元 素 上 ,如 果 对 
Box-3 同时 设置 清除 浮动 和 浮动 , 即 : 


.son3{clear:both; float:left;} 


则 效果 如 图 5-10 所 示 , 可 看 到 Box-3 的 左右 仍然 没有 浮动 的 元 素 。 


EE. EY =Iolx 
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图 5-9 对 Box-3 清除 浮动 图 5-10 对 Box-3 设置 清除 浮动 和 浮动 


由 此 可 见 ,清除 浮动 是 清除 其 他 盒子 浮动 对 该 元 素 的 影响 ,而 设置 浮动 是 让 元 素 自 身 
浮动 ,两 者 并 不 矛盾 ,因此 可 同时 设置 元 素 清除 浮动 和 浮动 。 

由 于 上 下 margin 全 加 现象 只 会 发 生 在 标准 流 的 情况 下 ,而 浮动 方式 下 盒子 的 任何 
margin 都 不 会 全 加 ,所 以 设置 盒子 浮动 并 清除 浮动 后 ,上 下 两 个 盒子 的 margin 不 车 加 。 
在 图 5-10 中 ,Box-3 到 Box-1 之 间 的 垂直 距离 是 20px, 即 它们 的 margin 之 和 。 


5.1.3 清除 浮动 影响 的 方法 


在 网 页 布局 中 ,浮动 元 素 会 影响 其 他 元 素 的 正常 排列 ,导致 网 页 元 素 不 能 按 人 们 的 意 
愿 显示 。 因 此 设置 元 素 浮动 后 应 尽量 清除 该 元 素 浮动 对 其 他 元 素 的 影响 。 对 于 下 列 两 种 
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情形 应 采用 不 同 的 方法 清除 浮动 。 
1. 来 自 子 元 素 的 浮动 


如 果 一 个 父 元 素 内 所 有 的 子 元 素 都 浮动 ,一 定 要 记得 对 这 个 父 元 素 作 清除 浮动 处 理 。 
否则 该 父 元 素 下 面 的 元 素 会 顶 到 浮动 元 素 的 位 置 上 去 (如 图 5-11 所 示 ), 下 面 的 代码 
(5-5. html) 可 清除 子 元 素 浮 动 对 父 元 素 的 影响 ,其 显示 效果 如 图 5-12 所 示 。 


div{padding:10px; margin:10px; 
border:1px dashed #111; background- color:#9bf; } 
.father{background- color:#ff9; border:lpx solid #111; } 
:cls {clear: both; } 
.sonl{float:right; } .son2{float:left;} 
.box3{background:#ccf;} 
<div class="father"> 
<div class="sonl">Box-1<br />Box-1</div> 
<div class="son2">Box- 2< /div> 


<br class="cls"> <!-- 这 是 清除 浮动 的 元 素 --> 
</div> 
<div class="box3">Box- 3< /div> <!-- 父 元 素 下 面 的 元 素 --> 

















图 5-11 未 清除 子 元 素 浮动 时 的 效果 图 5-12 清除 子 元 素 浮动 后 的 效果 


这 种 方法 添加 了 一 个 元 素 (. cls) 专 门 用 来 清除 浮动 ,如 果 不 愿 添加 新 元 素 , 可 使 用 伪 
元 素 的 方式 来 设置 清除 浮动 。 下 面 的 代码 在 父 元 素 内 部 的 末尾 添加 一 个 伪 元 素 , 使 用 伪 
元 素 清除 浮动 的 经 典 代码 (5-6. htmlD) 如 下 : 


.father:after { content: ''; display: table; clear: both; } 
.father { * zoom: 1; } /* 兼容 IE6、IE7, 如 不 需要 可 去 掉 * / 


注意 : 对 于 一 个 父 元 素 内 的 所 有 子 元 素 都 浮动 ,一 种 极其 错误 的 做 法 是 设置 父 元 素 
的 高 度 来 掩饰 浮动 对 它 的 影响 ,如 . father{height:50px;) ,这样 做 只 是 掩饰 了 浮动 ,并 没 
有 清除 浮动 的 影响 ,虽然 使 父 元 素 看 起 来 正常 了 ,但 父 元 素 下面 的 元 素 仍 然 会 顶 到 上 
面 去 。 

因此 ,在 CSS 布局 时 ,如 果 发 现 一 个 元 素 移动 到 它 原来 位 置 的 左上 方 或 右上 方 ,并 且 
和 其 他 元 素 发 生 了 重 和 至 , 则 很 可 能 是 受到 了 其 他 盒子 浮动 的 影响 。 
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2. 来 自 兄弟 元 素 的 浮动 


如 果 一 个 元 素 前 面 的 兄弟 元 素 浮动 ( 见 图 5-13) , 则 可 以 对 紧邻 该 浮动 元 素 的 后 一 个 
元 素 作 清除 浮动 处 理 。 例 如 ,不 希望 Box-3 受 前 面 兄弟 元 素 浮动 的 影响 , 则 可 对 Box-3 清 
除 浮动 ,代码 (5-7. html) 如 下 ,显示 效果 如 图 5-14 所 示 。 


div{ 

padding:10px 20px; margin:7px; border:1px dashed #111; 

background- color:#9bf; float:left; } /x* 所 有 div 都 浮动 * / 
.box3{background:#ccF; clear:both;} /对 Box-3 清 除 浮动 * / 


<div class="sonl">Box-1<br />Box-1l< /div> 
<div class="son2">Box-2</div> 
<div class="box3">Box- 3</div><div class="box4">Box- 4< /div> 








图 5-13 清除 浮动 前 图 5-14 清除 浮动 后 


除了 直接 对 后 面 的 元 素 清除 浮动 外 ,还 可 以 增加 一 个 元 素 专用 于 清除 浮动 ,代码 
如 下 : 


<div class="son1l">Box-1<br />Box-1</div><div class="son2">Box- 2< /div> 
<br class="cls" style="clear:both"> < !-- 增 加 一 个 清除 浮动 的 元 素 - -> 
<div class="box3">Box- 3</div><div class="box4">Box- 4< /div> 


虽然 增加 一 个 元 素 使 代码 变 得 元 余 , 但 这 样 使 每 个 元 素 的 功能 变 得 更 加 清晰 ,因此 推 
荐 使 用 。 
3. 避免 滥用 浮动 


由 于 元 素 浮 动 会 对 其 他 元 素 的 布局 产生 影响 ,因此 应 避免 滥用 浮动 ,下 面 是 两 种 滥用 
浮动 的 典型 场景 。 

(1) 为 了 使 元 素 宽度 收缩 而 设置 浮动 .由 于 浮动 元 素 的 宽度 会 自动 收缩 ( 称 为 主动 包 
庄 ) ,于 是 就 用 浮动 属性 代替 width 属性 。 实 际 上 ,如 果 只 需要 改变 元 素 的 宽度 ,应 设置 
width 属性 ,而 不 是 float。 

(2) 为 了 清除 浮动 的 影响 而 浮动 ,清除 浮动 正确 的 做 法 是 使 用 clear 属性 (例如 图 5-9 
中 的 Box-3) ,但 如 果 对 Box-3 设置 float 属性 ,再 设置 width 值 ,似乎 也 能 达到 图 5-9 中 的 
效果 ,但 实际 上 这 种 错误 的 做 法 将 导致 更 多 的 元 素 受到 浮动 的 影响 而 布局 混乱 。 因 此 ,如 
果 要 清除 浮动 应 对 相应 的 元 素 设置 clear 属性 ,而 不 是 float。 
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5.2 浮动 的 应 用 举例 


利用 单个 盒子 浮动 ,可 制作 出 图 文 混 排 及 首 字 下 沉 等 效果 。 利 用 多 个 盒子 浮动 , 则 可 
制作 出 水 平 导航 条 等 效果 。 


5.2.1 图 文 混 排 及 首 字 下 沉 效果 
如 果 将 一 个 盒子 浮动 , 另 一 个 盒子 不 浮动 ,那么 浮动 的 盒子 将 被 未 浮动 盒子 的 内 容 所 


环绕 。 如 果 这 个 浮动 的 盒子 是 图 像 元 素 , 而 未 浮动 的 盒子 是 一 段 文本 ,那么 就 实现 了 图 文 
混 排 效 果 。 示 例 代 码 (5-8. htmlD 如 下 ,效果 如 图 5-15 所 示 。 


<style> 
img{ 
border:1px gray dashed; margin:10px 10px 10px 0; 
padding:5px; float:left; /* 设置 图 像 元 素 浮动 */  } 


p{ margin:0; 

font:14px/1.5 "宋体 "; text- indent: 2em; } 
</style> 
<img src="images/sheshou.jpg" /> 
<p> 在 遥远 古 希 腊 的 大 草原 中 ，…… 这 就 是 "人 马 族 "。< /p> 
<p> 人 马 族 里 唯 独 的 一 个 例外 -- 奇 伦 ……< /p> 






| 《9 图 文 温 排 效果 一 ozills PireE TE) 
文件 FE) 编辑 EE) 查看 W) 历史 (8) 书签 @) I 具 


在 通 远 古 希 腊 的 大 草原 中 ， 
驰 允 着 一 批 半 人 半 兽 的 族群 ， 这 
是 一 个 生性 区 殊 的 族群 。“ 半 人 
半 曾 ”代表 着 理性 与 非 理性 、 人 
性 与 兽性 间 的 矛盾 挣扎 ， 这 就 是 
“人 马 族 ”。 

人 马 族 里 唯 独 的 一 个 例外 一 
奇 伦 。 奇 伦 虽 也 是 人 马 族 的 一 
员 ， 但 生性 善良 ， 对 待 朋 友 万 以 坦率 著称 ， 所 以 奇 伦 在 族 
里 十 分 受 人 葛 敬 











图 5-15 图 文 混 排 效果 


在 图 文 混 排 的 基础 上 让 第 一 个 汉字 也 浮动 ,同时 变 大 , 则 出 现 了 首 字 下 沉 的 效果 , 添 
加 的 CSS 代码 (5-9. html) 如 下 ,效果 如 图 5-16 所 示 。 


p:first- letter{font- size:3em; float:left;} 


如 果 将 第 一 个 段落 浮动 , 则 出 现 了 文章 导读 框 效果 ,代码 (5-10. html) 如 下 ,效果 如 
图 5-17 所 示 。 
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首 字 下 沉 效果 -Werilla FireEe2 PE 
文件 四。 编辑 E) 查看 WD) 历史 G) 书签 @) 工具 
Te Say 通 远 的 古 希 障 大 草原 ) 导读 框 效果 - mezilla PEREEE ED 


文件 中 编辑 E) 查看 WD 历史 G@) 书签 @) 工具 
“ 半 人 半 兽 ”代表 
着 理性 与 非 理性 、 人 性 
与 兽性 间 的 矛盾 挣扎 ， 
这 就 是 “人 马 族 ”。 人 
马 族 里 唯 独 的 一 个 例外 
一 奇 伦 。 奇 伦 虽 也 是 人 
马 族 的 一 员 ， 但 生性 善良 ， 对 待 朋友 万 以 坦率 著称 ， 所 
以 奇 伦 在 族 里 十 分 受 人 莫 敬 


| ~ 中 ， 驰 验 着 一 批 半 人 半 
一 “ 兽 的 族群 ， 这 是 一 个 生 
性 节 稀 的 族群 。“ 半 人 半 兽 ” 
; 代表 着 理性 与 非 理性 、 人 性 与 
; 兽性 间 的 矛盾 挣扎 ， 这 就 是 “ 
se | 人 马 族 ”。 
人 马 族 里 唯 独 的 一 个 例外 -- 奇 
伦 。 奇 伦 虽 也 是 人 马 族 的 一 员 ， 但 生性 善 忆 ， 对 待 朋 友 
克 以 组 率 著称 ， 所 以 奇 伦 在 族 里 十 分 受 人 苯 敬 











图 5-16 首 字 下 沉 和 图 文 混 排 效果 图 5-17 导读 框 效果 


p{ margin:0; font- size:14px; line-height:1.5; 
text- indent: 2em; } 
p:first-child{ width:160px; float:left; /* 第 一 个 段落 浮动 * / 
margin:10px 10px 0 0; padding:10px; 
border:3px gray double; background:#9BD; } 
<p class="p1"> 在 遥远 的 古 希 腊 大 草原 中 ……< /p> 
<p>" 半 人 半 兽 "代表 着 理性 与 非 理 性 ……< /p> 


从 以 上 3 个 例子 可 以 看 出 ,网 页 中 无 论 是 图 像 还 是 文本 ,对 于 任何 元 素 , 在 排版 时 都 
应 视 为 一 个 盒子 ,而 不 必 在 乎 元 素 的 内 容 是 什么 。 


5.2.2 水 平 导航 条 


在 4.6.3 节 中 ,利用 元 素 的 盒子 模型 制作 了 一 个 竖 直 导航 条 。 如 果 要 把 这 个 竖 直 导 
航 条 变 为 水 平 导 航 条 ,有 以 下 两 种 方法 : 
方法 一 ,设置 所 有 a 元素 浮动 ,这 是 因为 多 个 元 素 浮动 ,这 些 元 素 就 会 水 平 排列 。 当 
然 水 平 导 航 条 一 般 不 需 设置 宽度 ,可 以 把 width 属性 去 掉 。 图 5-18 是 水 平 导 航 条 的 效 
果 , 它 的 结构 代码 (5-11. html) 如 下 : 
<div id="nav"> 
<a href="#"> 首 页 </a><a href="#"> 中 心 简介 </a> 
…<a href= "#"> 技 术 支持 和 服务 < /a> 


</div> 


图 5-18 水 平 导航 条 
CSS 样式 主要 是 给 元 素 设置 盒子 和 背景 属性 ,代码 如 下 : 


#nav{ffont- size: 14px;} 
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#nava { 
color: red; background- color: #9CF; 
text-align: center; text- decoration: none; 
padding:6px 10px 4px; border: lpx solid #39F; 


float:left; /* 使 a 元 素 浮动 ,实现 水 平 排列 */ } 
#nav ata{margin- left:5px;} /* 设 置 第 2 到 最 后 一 个 a 元 素 有 5px 的 左 间距 * / 
#nav a:hover {color: white; background- color: #930; } 
/* 设置 前 景色 和 背景 色 * / 
提示 : 


(1) 本 例 使 用 了 相 邻 选择 器 (并 nav a 十 a) 选 中 了 除 第 1 个 a 元 素 之 外 的 其 他 a 元 素 ， 
再 给 它们 设置 左边 距 , 这 样 就 实现 了 第 一 个 a 元 素 没有 左边 距 。 

(2) 设置 了 浮动 后 元 素 将 自动 以 块 级 元 素 显示 ,因此 就 不 需要 再 对 #nav a 选择 器 添 
加 display:block 属性 了 ,因为 这 是 多 余 的 。 

方法 二 ,将 所 有 a 元 素 的 display 属性 设置 为 inline-block ,inline-block 元 素 兼 有 块 级 
元 素 和 行内 元 素 的 特点 ,表现 在 它 可 以 像 块 级 元 素 一 样 设置 宽度 和 高 度 , 同 时 它 又 像 行 内 
元 素 一 样 是 从 左 到 右 排列 ,宽度 不 会 自动 伸展 。 其 CSS 关键 代码 如 下 : 


#navaif 
display: inline-block; } /* 将 5-11.html 的 float:left; 改 成 这 条 * / 


5.2.3 新 闻 栏 目 框 


在 网 站 的 首页 中 ,文字 内 容 一 般 被 组 织 成 栏目 框 的 形式 。 网 站 是 按 栏 目 组 织 内 容 的 ， 
因此 栏目 框 是 最 常见 的 网 页 界面 元 素 ,掌握 栏目 框 的 制作 是 网 页 制作 中 一 项 重要 的 基本 
功 。 如 图 5-19 所 示 的 是 一 种 简洁 风格 的 栏目 框 。 





基层 动态 


计算 机 科学 与 技术 系 成 功 举办 毕业 生 欢 送 会 

后 勤 管 理 处 成 功 举办 创建 党 员 示范 宿舍 动员 大 会 
会 计 系 成 功 举办 2017 届 学 生 毕 业 典 礼 

土木 工程 学 院 学 生 喜 获 佳绩 

会 计 系 举办 201?7 年 专 接 本 、 考 研 、 国 考 经 验 交流 会 








图 5-19 栏目 框 示例 
栏目 框 可 分 为 栏目 标题 栏 和 内 容 列表 区 。 对 于 栏目 标题 栏 ,常见 的 结构 代码 如 下 : 


<div class="title"> 
<h2> 基 层 动态 < /h2> 
<span class="more"><a href="more.htm"> 更 多 &gt;&gt;</a></span> 
</div> 
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可 见 , 栏 目标 题 栏 由 两 部 分 组 成 , 即 左边 的 栏目 标题 和 右边 的 “更 多 ”链接 ,因此 需要 
两 个 HTML 元 素来 存放 。 为 了 将 栏目 标题 栏 组 合成 一 个 整体 ,使 用 了 一 个 div 元 素 将 这 
两 个 元 素 包裹 起来。 

对 于 “更 多 ”链接 ,之 所 以 将 其 放 入 一 个 span 元 素 中 ,是 为 了 将 CSS 布局 样式 和 CSS 
文本 样式 分 离 。 即 对 span 元 素 设置 布局 样式 ,而 对 a 元素 设置 文本 样式 。span 元 素 在 这 


里 起 到 了 布局 元 素 的 作用 。 
对 于 内 容 列 表 区 域 ,从 语义 上 看 , 它 是 一 个 典型 的 无 序列 表 , 因 此 使 用 ul 元 素来 描述 
列表 区 域 ,其 结构 代码 如 下 : 


<ul class="list one"> 
<1i><a href="1.htm"> 计 算 机 科学 与 技术 系 …*…</a><b>07-25< /b></1i> 


<1li><a href="5.htm"> 会 计 系 举办 2017 年 ……</a><b>07-06</b></1i> 
</ul> 


然后 将 标题 栏 代码 和 内 容 列 表 区 域 代码 用 一 个 div 元 素 包含 起 来 , 即 得 到 栏目 框 的 
完整 结构 代码 (5-12. html) 如 下 : 


<div class="news"> 
<div class="title"> 
<h2> 基 层 动态 </h2> 
<span class="more"><a href= "more.htm"> 更 多 sgt;&gt;</a></span> 
</div> 
<ul class="list one"> 


<1i><a href="1.htm"> 计 算 机 科学 与 技术 系 举办 毕业 生 </a><b>07-25</b></1i> 


<1i><a href="5.htm"> 会 计 系 举办 2017 年 专 接 本 交流 会 </a><b>07-06</b></1i> 
</ul> 
</div> 


提示 : 由 于 在 网 页 中 一 般 有 多 个 栏目 框 ,因此 对 栏目 框 中 的 元 素 一 般 设置 class 属 
性 ,而 不 设置 id 属性 ,从 而 使 栏目 框 的 样式 代码 可 以 被 很 多 个 风格 相似 的 栏目 框 共用 。 

接 下 来 设置 栏目 框 的 样式 ,从 外 表 来 看 ,栏目 框 的 文本 样式 主要 是 设置 文字 大 小 和 行 
距 。 栏 目 框 的 布局 样式 主要 是 要 使 栏目 标题 和 “更 多 ”链接 分 布 在 容器 两 端 。 新 闻 标 题 和 
日 期 也 分 布 在 容器 的 两 端 。 这 称 为 两 端 对 齐 , 要 实现 两 端 对 齐 , 主 要 有 以 下 3 种 方法 。 

(1) 左右 都 浮动 法 : 设置 左边 的 元 素 左 浮动 ,右边 的 元 素 右 浮动 。 这 时 由 于 两 个 盒 
子 都 浮动 ,不 占据 外 围 容器 的 空间 ,所 以 还 必须 设置 外 围 盒 子 的 高 度 ,或 设置 外 围 盒 子 清 
除 浮 动 ,使 它 能 包含 住 两 个 浮动 的 盒子 。 标 题 栏 的 CSS 样式 代码 (5-12. html) 如 下 : 


.news{ width:420px; margin- left: 20px;} 
.title { 
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内 容 列表 区 域 的 CSS 样式 代码 (5-12. html) 如 下 : 





(2) 右边 元 素 右 对 齐 法: 这 种 方法 仍然 设置 左边 元 素 左 浮动 ,但 设置 右边 的 元 素 不 
浮动 ,并 将 它 设置 为 块 级 元 素 , 使 得 该 元 素 的 盒子 能 伸展 到 整 行 ,再 设置 它 的 内 容 右 对 齐 ， 
而 浮动 元 素 位 于 其 左边 , 则 效果 一 样 。 以 内 容 区 域 为 例 , 关 键 CSS 代码 (5-13. html) 





说 明 : 这 种 方法 实际 上 可 将 包 庄 日 期 的 b 元 素 去 掉 。 

(3) 左右 元 素 颠 倒 法 : 首先 在 HTML 代码 中 将 右边 的 日 期 写 在 左边 的 标题 前 面 , 然 
后 设置 日 期 元 素 右 浮 动 即 可 ,这 样 标题 元 素 就 不 需要 左 浮动 了 。 需 要 注意 的 是 ,这 种 方法 
最 好 将 右边 的 日 期 写 在 前 面 ,否则 在 IE7 中 浮动 的 日 期 元 素 会 换行 。 关 键 CSS 代码 


(5-14. html) 如 下 : 


再 将 5-12. html 中 下 面 这 条 语句 删除 即 可 。 





147 











《HTML5+CSS3 Web 前 端 开 发 》 





-list_one li a {float: left;} /* 删除 该 行 这 句 * / 


内 容 区 域 文本 溢出 的 解决 办 法 


在 动态 网 站 中 ,栏目 框 内 容 列 表 中 的 标题 一 般 读 取 自 数据 库 , 这 时 经 常会 出 现 标题 过 
长 而 栏目 框 容纳 不 下 的 情况 。 为 此 ,CSS3 提供 了 textroverflow 属性 用 来 裁 切 过 长 的 文 
本 。 语 法 如 下 : 


text-overflow : clip | ellipsis 

取 值 为 ellipsis 时 表示 当 元 素 内 文本 溢出 时 就 裁 切 并 添加 省 略 号 ,而 clip 表示 只 进行 
裁 切 不 添加 省 略 号 。 

在 实际 应 用 中 ,该 属性 必须 配合 另外 两 条 属性 一 起 使 用 才 有 效果 ,示例 代码 如 下 


"list one li{ 


text- overflow: ellipsis; /* 文 本 溢出 则 裁 切 * / 
white- space: nowrap; /* 强制 不 换行 * / 
overflow: hidden; /* 溢出 内 容 隐 藏 */ } 


但 是 ,text-overflow 属性 只 适用 于 block 或 inline-block 的 元 素 , 因 为 元 素 需 要 有 一 
个 固定 的 宽度 才能 裁 切 文本 。 而 浮动 元 素 脱离 了 标准 流 , 是 没有 宽度 限制 的 。 

因此 ,只 有 第 3 种 “左右 元 素 颠 倒 法 (5-14. html) ”才能 应 用 上 面 的 示例 代码 实现 自动 
裁 切 过 长 文本 的 效果 ,其 他 两 种 方法 由 于 标题 元 素 都 设置 了 左 浮动 ,必须 对 浮动 元 素 设置 
一 个 固定 宽度 ,再 将 上 述 代码 应 用 于 a 元 素 而 不 是 1i 元 素 才 有 效果 。 


5.2.4 微 博 对 话 框 


图 5-20 所 示 是 一 个 微 博 对 话 框 ,这 是 一 种 典型 的 左右 结构 。 按 一 般 的 制作 思路 来 
说 ,可 能 是 让 左边 和 右边 的 元 素 都 浮动 ,从 而 实现 左右 排列 。 但 实际 上 还 有 一 种 更 简单 的 
方法 ,就 是 只 让 左边 的 元 素 浮动 ,再 对 右边 的 元 素 设置 足够 宽 的 左 外 边 距 (margin-left)， 
以 空 出 左边 元 素 的 位 置 。 结 构 代码 (5-15. htmD 如 下 ， 


<div class="weibo"> 
<img class="userPic" src="images/head01.jpg" width="60" height="60" /> 
<strong class="userName"> 张 丽 英 </ strong> 
<p class="intro"> 关 心 章 莹 颖 案 的 华人 律师 ……< /p> 


</div> 


CSS 代码 如 下 : 


.Weibo{font- size:14px; width:40%;} 
.userPic{float:left;padding: 5px; border: lpx solid #ccc;} 
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此 案 讨 论 ， 并 于 今 展 向 法 制 晚 报 记者 透 需 了 李 昌 鲜 博 士 对 章 鞋 颖 
案 的 看 法 。 李 昌 鲜 认为 章 竺 频仍 有 生还 的 可 能 性 ，FBI 应 该 全 力 


本 关心 章 鞋 矣 案 的 华人 律师 邓 洪 6 日 与 美国 刑事 鉴定 专家 李 虽 狂 就 
张 古 英 出动 未 寻 找 所 有 线索 ， 尽 快 拓 到 章 的 下 落 。…… 











图 5-20 ” 微 博 对 话 框 


.userName{float:left;clear:left; width:60px; text-align:center; margin:6px;} 
.introfmargin- left:82px; padding:10px;background- color: #EEF7FF; 
border:1lpx solid #ccc; line-height:1.8em; } 


这 种 方式 的 优点 在 于 : 

(1) 结构 代码 更 简洁 , 且 更 符合 语义 。 

(2) 只 要 不 设置 右边 元 素 的 宽度 ,就 能 制作 出 左边 元 素 宽度 固定 ,右边 元 素 可 变 宽度 
的 效果 。 


5.3 相对 定位 


利用 浮动 属性 定位 只 能 使 元 素 浮动 形成 图 文 混 排 或 块 级 元 素 水 平 排列 的 效果 ,其 定 
位 功能 仍 不 够 灵活 强大 。 本 节 介 绍 的 在 定位 属性 下 的 定位 能 使 元 素 通过 设置 偏 移 量 定位 
到 页 面 或 其 包含 框 的 任何 一 个 地 方 ,定位 功能 非常 灵活 。 


5.3.1 定位 属性 和 偏 移 属 性 


为 了 让 元 素 在 定位 属性 下 定位 ,需要 对 元 素 设置 定位 属性 position, position 的 取 值 
有 4 种 , 即 relative、absolute,fixed 和 static。 其 中 static 是 默认 值 ,表示 不 使 用 定位 属性 
定位 ,也 就 是 盒子 按照 标准 流 或 浮动 方式 排列 。 因 此 定位 属性 的 取 值 中 用 得 最 多 的 是 相 
对 定位 (Crelative) 和 绝对 定位 (absolute) ,本 节 主 要 介绍 它们 的 作用 。 

偏 移 属性 是 指 top、left、bottom、right 这 4 个 属性 ,为 了 使 元 素 在 定位 属性 下 从 基准 
位 置 发 生 偏 移 , 偏 移 属性 必须 和 定位 属性 配合 使 用 ,left 指 相对 于 定位 基准 的 左边 向 右 偏 
移 的 值 ,top 指 相对 于 定位 基准 的 上 边 向 下 偏 移 的 值 。 取 值 可 以 是 像素 或 百分比 。 例 如 : 


#mydiv {position: absolute; left: 50%; top: 30px;} 


偏 移 属性 仅 对 设置 了 定位 属性 的 元 素 有 效 , 因 此 一 定 要 设置 了 定位 属性 才能 设置 偏 
移 属性 。 


5.3.2 相对 定位 的 特点 


使 用 相对 定位 的 盒子 的 位 置 依据 常 以 标准 流 的 排版 方式 为 基础 ,然后 使 盒子 相对 于 
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它 原来 的 标准 位 置 偏 移 指定 的 距离 。 相 对 定位 的 盒子 仍 在 标准 流 中 , 它 后 面 的 元 素 仍 以 
标准 流 方式 对 待 它 , 因 此 相对 定位 元 素 占据 的 空间 会 被 保留 。 

具体 来 说 ,如 果 将 一 个 元 素 定义 为 相对 定位 (position: relative; ) ,那么 它 将 保持 在 原 
来 的 位 置 上 不 动 。 如 果 再 对 它 设置 top、left 等 属性 进行 垂直 或 水 平方 向 偏 移 , 那 么 它 将 
“相对 于 ” 它 原来 的 位 置 发 生 移动 。 例 如 图 5-21 中 的 em 元 素 就 是 通过 设置 相对 定位 再 设 
置 位 移 让 它 “ 相 对 于 ”原来 的 位 置 向 左下 角 偏 移 ,同时 它 原来 的 位 置 仍然 不 会 被 其 他 元 素 
占据 。 代 码 (5-16. html) 如 下 : 


em { 

background- color: #0099FF; 

position: relative; left: 60px; top: 30px;} 
PT 

padding: 25px; border: 2px solid #933; background- color: #dbfdba;} 
<p> 在 远古 时 代 ,<em> 人 类 与 神 都 同样 居住 在 地 上 < /em> ,一 起 ……< /p> 


隔 
文件 四 编辑 EE) 查看 W) 历史 GE) 书签 @) 工具 了) 帮助 0 





子 、 铺 道路 ,未 学 名 习 ， 
所 和 许 允 训 和 过 不 了 ， 纷 纵 开 人 类 ， 加 到 天 上 届 





图 5-21 设置 em 元 素 为 相对 定位 


可 以 看 到 ,元素 设 置 为 相对 定位 后 有 两 点 会 发 生 : 

(1) 元 素 原 来 占据 的 位 置 仍然 会 保留 ,也 就 是 说 ,相对 定位 的 元 素 未 脱离 标准 流 ; 

(2) 因为 是 使 用 了 定位 属性 的 元 素 , 所 以 会 和 其 他 元 素 发 生 重 番 。 

设置 元 素 为 相对 定位 的 作用 可 归纳 为 两 种 : 一 是 让 元 素 相对 于 它 原 来 的 位 置 发 生 位 
移 , 同 时 不 释放 原来 占据 的 空间 ;二 是 让 元 素 的 子 元 素 以 它 为 定位 基准 进行 定位 ,同时 它 
的 位 置 保 持 不 变 , 这 时 相对 定位 的 元 素 成 为 包含 框 ,一 般 是 为 了 帮助 其 子 元 素 进行 绝对 
定位 。 


5.3.3 相对 定位 的 应 用 举例 


1. 鼠标 指针 滑 过 时 向 右 下 偏 移 的 链接 


在 有 些 网 页 中 , 当 鼠 标 指针 滑动 到 超 链接 上 方 时 , 超 链接 的 位 置 会 发 生 轻 微 的 移动 ， 
如 向 左下 方 偏 移 ,让 人 觉得 链接 被 鼠标 指针 拉 上 来 了 ,如 图 5-22 所 示 。 

这 种 效果 的 主要 原理 就 是 运用 了 相对 定位 。 在 CSS 中 设置 a 元 素 为 相对 定位 , 当 鼠 
标 指 针 滑 过 时 ,就 让 它 相对 于 原来 的 位 置 发 生 偏 移 。CSS 代码 (5-17. html) 如 下 : 
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首 页 中 心 简介 政策 际 规 常用 下 载 为 您 服务 | 











图 5-22 ” 偏 移 的 超 链 接 ( 当 鼠标 指针 悬 停 时 向 左下 方 偏 移 ) 


a:hover { 
color: red; position: relative; right: 2px; top: 3px; } 


还 可 以 给 这 些 链接 添加 盒子 ,那么 盒子 也 会 按 上 述 效果 发 生 偏 移 , 如 图 5-23 所 示 。 
[|e | ms || RR | | 


图 5-23 ”给 链接 添加 盒子 ,同样 会 偏 移 


2. 制作 简单 的 阴影 效果 


在 4.7.3 节 中 ,即便 要 制作 如 图 4-66 所 示 的 简单 阴影 效果 都 需要 用 到 一 张 * 左 上 边 ” 
的 图 片 。 实 际 上 ,可 以 利用 相对 定位 技术 ,不 用 一 张 图 片 也 能 制作 出 和 图 4-66 相同 的 简 
单 阴影 效果 。 它 的 原理 是 在 img 元 素 外 套 一 个 外 围 容 器 ,将 外 围 容器 的 背景 设置 为 灰 
色 ,作为 img ee 样 大 ,这 时 图 像 
就 正好 把 外 围 容器 的 背景 完全 覆盖 。 再 设置 图 像 相 对 于 原来 的 位 置 往 左上 方 偏 移 几 个 像 
素 ， ee 影 例子 右边 和 下 边 部 分 的 背景 ， 看 起 来 就 是 img 元 素 
的 阴影 了 。 代 码 (5-18. html) 如 下 ,效果 如 图 4-66 所 示 。 


.Shadow img { 
padding: 6px; border: lpx solid #465B68; background- color: #fff; 
position: relative; left: -5px; top: ~- 5px;} /* 向 左上 方 偏 移 * / 
div.shadow { 


background- color: #ccc; 
float:left; /* 使 div 盒子 收缩 ,和 img 一 样 大 * / 
} 

<div class="shadow">< img src="works.jpg" /></div> 


3. 固定 宽度 网 页 居中 的 相对 定位 法 


使 用 相对 定位 法 可 以 实现 固定 宽度 的 网 页 居中 ,该 方法 首先 将 包含 整个 网 页 的 包含 
框 container 进行 相对 定位 使 它 向 右 偏 移 浏览 器 宽度 的 50%, 这 时 左边 框 位 于 浏览 器 中 
线 的 位 置 上 ,然后 使 用 负 边 界 将 它 向 左 拉 回 整个 页 面 宽 度 的 一 半 , 如 图 5-24 所 示 , 从 而 达 
到 水 平 居中 的 目的 。 代 码 (5-19. html) 如 下 : 

#container {position:relative; 


width:760px; left:50%; margin- left:— 380px;} 
<div id="container"> 将 网 页 内 容 放 置 在 该 处 < /div> 
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left: 50% 人 50% 


body 






RS 
margin-left: -380px; 


container NX 


container 




















5-24 相对 定位 法 实现 网 页 居中 示意 图 


这 段 代 码 的 意思 是 ,设置 container 的 定位 是 相对 于 它 原来 的 位 置 , 而 它 原 来 默认 的 
位 置 是 在 浏览 器 窗口 的 最 左边 ,然后 将 其 左边 框 移动 到 浏览 器 的 正中 央 , 这 是 通过 “left: 
50%” 实 现 的 ,这 样 就 找到 了 浏览 器 的 中 线 。 再 使 用 负 边 界 法 将 盒子 的 一 半 宽 度 从 中 线 位 
置 拉 回 到 左边 ,从 而 实现 了 水 平 居中 。 

想 一 想 : 如 果 把 井 container 选择 器 中 (left: 50%; margin-left: 一 380px;) 改 为 
(right:50%; margin-right: 一 380px; ) ,还 能 实现 居中 吗 ? 

另外 ,大 家 知道 div 中 的 内 容 默 认 情况 下 是 顶端 对 齐 的 ,有 时 和 希望 div 中 内 容 垂直 居 
中 ,如 果 div 中 只 有 一 行内 容 , 可 以 设置 div 的 高 度 height 和 行 高 line-height 相等 。 而 如 
果 div 中 有 多 行内 容 , 更 一 般 的 方法 就 是 上 面 这 种 相对 定位 的 思想 ,把 div 中 的 内 容 放 入 
到 一 个 子 div 中 ,让 子 div 相对 于 父 div 向 下 偏 移 50% ,这 样子 div 的 顶部 就 位 于 父 div 的 
垂直 中 线 上 ,然后 再 设置 子 div 的 margin-top 为 其 高 度 一 半 的 负 值 。 


s.4 绝对 定位 和 固定 定位 
5.4.1 绝对 定位 


绝对 定位 是 指 元 素 的 位 置 以 它 的 包含 框 为 基准 进行 定位 。 绝 对 定位 的 元 素 完全 脱离 
了 标准 流 ,漂浮 在 网 页 上 ,不 占据 网 页 空间 ,不 影响 其 他 元 素 的 排列 。 绝 对 定位 元 素 宽度 
会 自动 收缩 ,以 行内 块 (inline-block) 元 素 显 示 。 

绝对 定位 的 偏 移 值 是 指 从 它 的 包含 框 边框 内 侧 到 元 素 的 外 边界 之 间 的 距离 ,如 果 修 
改元 素 的 margin 值 会 影响 元 素 内 容 的 显示 位 置 。 

1. 一 般 情 况 下 的 绝对 定位 

如 果 将 相对 定位 示例 (5-16. html) 中 em 的 定位 属性 值 由 relative 改 为 absolute, 那 么 
em 将 按照 绝对 定位 方式 定位 ( 见 图 5-25) ,可 见 , 它 将 以 浏览 器 窗口 左上 和 角 为 基准 定位 ， 


配合 left top 属性 值 进行 偏 移 ,同时 em 元 素 原 来 占据 的 位 置 将 消失 ,也 就 是 说 , 它 脱 离 了 
标准 流 ,其 他 元 素 当 它 不 存在 了 一 样 。em 选择 器 的 代码 (5-20. html) 如 下 : 


em {background- color: #09f; 
position:absolute; left: 60px; top: 30px;} 
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在 ， ， 可 是 人 类 
i 由 不 但 学 全 建 上 和 | 还 学 会 色 

欺骗 等 等 不 好 的 恶习 ， 搞 得 许多 神仙 都 受 不 
人 回 到 天 上 居住 。 









图 5-25 设置 em 元 素 为 绝对 定位 


但 要 注意 的 是 ,设置 为 绝对 定位 (position:absolute; ) 的 元 素 ,并 非 总 是 以 浏览 器 窗口 
为 定位 基准 的 。 实 际 上 ,绝对 定位 元 素 是 以 它 的 包含 框 为 基准 进行 定位 的 。 所 谓 包含 框 ， 
是 指 距离 它 最 近 的 设置 了 定位 属性 的 父 级 元 素 的 盒子 。 如 果 它 所 有 的 父 级 元 素 都 没有 设 
置 定 位 属性 ,那么 包含 框 就 是 浏览 器 窗口 。 

下 面 对 em 元 素 的 父 级 元 素 p 设置 定位 属性 ,使 p 元 素 成 为 em 元 素 的 包含 框 。 这 
时 ,em 元 素 就 不 再 以 浏览 器 窗口 为 基准 进行 定位 了 ,而 是 以 它 的 包含 框 p 元 素 的 盒子 为 
基准 进行 定位 ,效果 如 图 5-26 所 示 。 对 应 的 CSS 代码 (5-21. html) 如 下 : 


Pp { background- color: #dbfdba; 

padding: 25px; border: 2px solid #6c4788; 

position:relative;} /* 让 pp 元 素 成 为 包含 框 * / 
em {background- color: #09f; 

position:absolute; left: 60px; top: 40px; | 


) 相对 定位 和 绝对 定位 配合 使 用 -Werills Firefes 








、 铺 道路 
欺骗 等 等 不 和 好 的 恶习 ， 机 


入 回 到 天 上 居住 





图 5-26 设置 em 为 绝对 定位 同时 设置 p 为 相对 定位 


上 述 代码 就 是 相对 定位 和 绝对 定位 配合 使 用 的 例子 ,这 种 方式 非常 有 用 ,可 以 让 子 元 
素 以 父 元 素 为 定位 基准 进行 定位 。 
提示 : 绝对 定位 是 以 它 的 包含 框 的 边框 内 侧 为 基准 进行 定位 ,因此 改变 包含 框 的 填 
充值 不 会 对 绝对 定位 元 素 的 位 置 造成 任何 影响 。 
表 5-1 对 相对 定位 和 绝对 定位 的 特点 进行 了 比较 。 
表 5-1 相对 定位 和 绝对 定位 的 比较 


比较 项 目 相对 定位 (relative) 绝对 定位 (absolute) 

元 素 以 熙 离 它 最 近 的 设置 了 定位 属性 的 父 级 元 素 为 定位 

ns 基准 , 若 它 所 有 的 父 级 元 素 都 没 设置 定位 属性 , 则 以 浏览 
器 窗口 为 定位 基准 








定位 基准 
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续 表 
比较 项 目 相对 定位 (relative) 绝对 定位 (absolute) 
原来 的 位 置 还 占用 着 原来 的 位 置 ,未 不 占用 其 原来 的 位 置 ,已 经 脱离 标准 流 , 其 他 元 素 就 当 它 
脱离 标准 流 不 存在 一 样 
宽度 盒子 的 宽度 不 会 收缩 盒子 的 宽度 会 自动 收缩 ,成 为 行内 块 元 素 











绝对 定位 元 素 的 特点 是 盒子 的 高 度 和 宽度 会 自动 收缩 ,但 有 时 需要 得 到 固定 大 小 的 
绝对 定位 元 素 ,为 此 ,有 以 下 两 种 方法 可 实现 自 定 义 绝对 定位 元 素 的 大 小 : 

(1) 设置 绝对 定位 元 素 的 两 个 偏 移 属性 left ,top( 或 right ,bottom) ,再 设置 该 元 素 的 
width 和 height 属性 , 则 该 元 素 的 位 置 和 大 小 都 确定 了 。 

(2) 设置 绝对 定位 元 素 的 4 个 偏 移 属 性 left、top、right、bottom, 则 该 元 素 的 大 小 会 根 
据 父 元 素 的 大 小 和 4 个 偏 移 属性 计算 得 到 。 


2. 无 包含 框 无 偏 移 的 绝对 定位 


如 果 一 个 绝对 定位 元 素 无 包含 框 ,又 没有 设置 偏 移 属性 ,那么 它 将 保持 在 它 原来 的 位 
置 上 不 动 , 但 不 占据 原来 的 位 置 , 也 就 是 说 ,漂浮 在 它 原来 的 位 置 上 不 动 , 如 果 再 对 它 设置 
margin 属性 ,就 可 以 让 它 以 原来 的 位 置 为 基准 任意 偏 移 。 例 如 : 


em {background- color:rgba(0,163,255, .5); 
position: absolute;} /* 无 包含 框 无 偏 移 属性 的 绝对 定位 x / 


这 种 方式 代码 简洁 ,不 需要 对 父 元 素 设 置 定位 属性 ,适合 于 对 小 图 标 等 进行 定位 , 具 
体 实例 请 看 5.4. 2 节 中 *“ 缺 角 的 导航 条 ”。 


5.4.2 绝对 定位 的 应 用 举例 


绝对 定位 元 素 的 特点 是 完全 脱离 了 标准 流 ,不 占据 网 页 中 的 位 置 ,而 是 悬浮 在 网 页 
上 。 利 用 这 个 特点 ,绝对 定位 可 以 制作 漂浮 广告 ,弹出 菜单 等 浮 在 网 页 上 的 元 素 。 如 果 希 
望 绝对 定位 元 素 以 它 的 父 元 素 为 定位 基准 , 则 需要 对 它 的 父 元 素 设置 定位 属性 (一 般 设置 
为 相对 定位 ) ,使 它 的 父 元 素 成 为 包含 框 ,这 就 是 绝对 定位 和 相对 定位 的 配合 使 用 (简称 
“ 父 相 子 绝 ”)。“ 父 相 子 绝 ” 的 应 用 非常 常见 ,下 面 列举 几 例 。 


1. 缺 角 的 导航 条 


图 5-27 是 一 个 缺 角 的 导航 条 ,这 是 一 个 定位 基准 和 绝对 定位 技术 结合 的 典型 例子 
(或 者 利用 无 包含 框 无 偏 移 的 绝对 定位 技术 ) ,下 面 来 分 析 它 是 如 何 制作 的 。 


(Sr Ge 


5-27 ” 缺 角 的 导航 条 





154 











首先 ,如 果 这 个 导航 条 没有 缺 角 ,那么 这 个 水 平 导航 条 完全 可 以 通过 盒子 在 标准 流 及 
浮动 方式 下 的 排列 来 实现 ,不 需要 使 用 定位 属性 。 其 次 , 缺 的 这 个 角 是 通过 一 个 元 素 的 盒 
子 释放 在 导航 选项 盒子 上 实现 的 ,它们 之 间 的 位 置 关系 如 图 5-28 所 示 。 


国 首页 国 中 心 简介 国 政策 法 规 图 常用 下 载 


图 5-28 缺 角 的 导航 条 元 素 盒子 之 间 的 关系 


形成 缺 角 的 盒子 实际 上 是 一 个 空 元 素 ,该 元 素 的 左边 框 是 8px 宽 的 白色 边框 ,下 边 
框 是 8px 宽 的 蓝 色 边框 ,它们 交汇 就 形成 了 斜 边 效果 ,如 图 5-29 所 示 。 


图 5-29 缺 角 处 是 一 个 左 白 . 下 蓝 边 框 的 空 元 素 





可 以 看 出 ,导航 项 左上 角 的 盒子 必须 以 导航 项 为 基准 进行 定位 ,因此 必须 设置 导航 项 
的 盒子 为 相对 定位 ,让 它 成 为 一 个 包含 框 ,然后 将 左上 角 的 盒子 设置 为 绝对 定位 ,使 左上 
角 的 盒子 以 导航 项 为 基准 进行 定位 ,并 且 还 使 左上 和 角 盒 子 不 占据 网 页 空间 。 

下 面 将 这 个 实例 分 解 成 几 步 来 做 。 

(1) 本 例 采 用 div 元 素 做 导航 条 ,a 元 素 表 示 导 航 项 ,因为 a 元 素 里 面 还 要 包含 一 个 
元 素 做 三 角形 ,所 以 应 在 a 元 素 中 添加 任意 一 个 行内 元 素 , 这 里 选择 b 元 素 , 它 的 内 容 应 
为 空 。 结 构 代 码 (5-22. html) 如 下 : 


<div id="nav4"> 
<a href="#"><b></b> 首 页 </a><a href="#"><b></b> 中 心 简介 </a> 


<a href="#"><b>< /b> 技术 支持 </a> 
</div> 


(2) 因为 要 设置 a 元 素 的 边框 填充 等 值 ,所 以 设置 a 元 素 为 块 级 元 素 显示 ,而 要 让 块 
级 元 素 水 平 排列 ,必须 设置 这 些 元 素 为 浮动 。 当 然 , 设 置 为 浮动 后 元 素 将 自动 以 块 级 元 素 
显示 ,因此 也 可 以 将 a 元 素 的 “display:block;” 去 掉 。 同 时 ,要 让 a 元素 成 为 其 子 元 素 的 
包含 框 ,必须 设置 a 元素 的 定位 属性 为 relative。 因 此 ,a 元 素 的 CSS 代码 如 下 : 
#nav4a{ 


display: block; background- color: #79bcff; 
font- size: 14px; color: #333; text- decoration: none; 


border-bottom:8px solid #99CC00; /x* 以 上 5 条 为 普通 css 样式 设置 * / 
float: left; 

padding: 6px 10px 4px 10px; margin:0 2px; 

position:relative;} /* 让 a 元 素 作为 b 元 素 的 定位 基准 * / 
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(3) 接 下 来 设置 b 元 素 为 绝对 定位 ,让 它 以 a 元 素 为 包含 框 进行 定位 。 由 于 b 位 于 a 
的 左上 角 ,必须 设置 偏 移 属性 left:0 和 top:0。 由 于 b 元 素 中 没有 内 容 , 所 以 此 时 看 不 见 
b 元 素 。 然 后 设置 b 元 素 的 左边 框 为 白色 ,下 边框 为 a 元 素 的 背景 色 。 这 样 就 出 现 了 三 
角形 的 效果 。b 元 素 的 CSS 代码 如 下 : 

#nav4 abf 


border-bottom: 8px solid #79bcff; 
border- left: 8px solid #ffffff; /* 左边 框 和 下 边框 交汇 形成 三 角形 效果 * / 


overflow: hidden; height: 0; /* 这 两 条 为 兼容 IE6, 使 空 元 素 高 度 为 0* / 
position: absolute; 
left:0; top:0; } /* 相对 于 a 元 素 边框 内 侧 的 左上 角 定位 * / 


(4) 最 后 为 导航 条 添加 交互 效果 ,只 需 设置 鼠标 指针 经 过 时 a 元 素 的 字体 、 背 景色 改 
变 ,b 元素 下 边框 颜色 改变 就 可 以 了 。 代 码 如 下 : 


#nav4 a:hover { 
color: #c00; background- color: #ccc; border-bottom- color: #cf3; } 
#nav4 a:hover b { 


border-bottom- color: #ccc; } 


如 果 要 采用 无 包含 框 无 偏 移 的 绝对 定位 技术 来 实现 该 例 , 则 只 要 将 5-22. html 中 a 
元 素 的 定位 属性 去 掉 ,使 b 元素 无 包含 框 ,再 将 b 元 素 的 偏 移 属性 删除 ,由 于 a 元素 设置 
了 填充 值 ,b 元 素 必须 设置 margin 在 原来 位 置 上 向 左上 方 移动 ,具体 修改 代码 如 下 : 


#nav4 a {… position:reiativer?} /* 删除 position 属性 * / 
#nav4 a b {… eft:0;—top:0; /= 删除 偏 移 属性 * / 
margin:-6px 00—-10px; } /Vx 添 加 margin 属性 * / 


网 上 还 有 很 多 这 种 带 有 三 角形 的 导航 条 ,例如 在 图 5-30 中 ,在 默认 状态 时 将 三 角形 
隐藏 ,而 鼠标 指针 滑 过 时 会 显示 三 角形 。 





图 5-30 带 有 三 角形 的 导航 条 


2. 小 提示 窗口 


通常 所 有 的 HTML 标记 都 有 一 个 title 属性 。 添 加 该 属性 后 , 当 鼠 标 指针 停留 在 元 
素 上 时 ,会 显示 title 属性 里 设置 的 文字 。 但 用 title 属性 设置 的 提示 框 不 太美 观 。 实 际 
上 ,可 以 用 绝对 定位 元 素来 模拟 小 提示 框 ,由 于 这 个 小 提示 框 必须 在 其 解释 的 文字 盘 边 出 
现 ,所 以 要 把 待 解释 的 文字 设置 为 相对 定位 ,作为 小 提示 框 的 定位 基准 。 

下 面 是 CSS 小 提示 框 的 代码 (5-23. html) , 它 的 显示 效果 如 图 5-31 所 示 。 
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< style> 
a.tip{ 

color:red; text- decoration:none; 

position:relative;} /= 设置 待 解释 的 文字 为 定位 基准 * / 
atip span {display:none; position:absolute;  ”/* 默认 状态 下 隐藏 小 提示 窗口 */ 
top:15px; left:-30px; width:100px; } /= 设置 小 提示 窗口 的 位 置 和 大 小 * /} 
a.tip:hover {cursor:hand; /* 当 鼠 标 指针 滑 过 时 将 鼠标 指针 设置 为 手 形 * / 


z-index:999;} 
a.tip:hover .popbox { 


display:block; /* 当 鼠 标 指针 滑 过 时 显示 小 提示 窗口 * / 
background- color:#444; color:#fff; padding:10px; 
z-index:999; } /#* 设置 很 大 的 层 倒 值 防止 被 其 他 a 元 素 覆 盖 * / 
</style> 


<body><p>Web 前 台 技 术 :<a href="#" class="tip">Ajax<span class="popbox">Ajax 是 
一 种 浏览 器 无 刷新 就 能 和 web 服务 器 交换 数据 的 技术 < /span>< /a> 技 术 和 

<a href="#" class="tip">CSS< span class="popbox">Cascading Style Sheets 层 合 样式 
表 </span></a> 的 关系 </p>< /body> 





图 5-31 小 提示 窗口 的 效果 


3. CSS 下 拉 莱 单 


下 拉 菜 单 是 网 页 中 一 种 常见 的 界面 元 素 , 如 图 5-32 所 示 , 其 水 平 导 航 条 代表 一 级 导 
航 , 而 弹出 的 下 拉 菜单 表示 二 级 导航 。 因 此 ,下 拉 菜 单 的 作用 是 建立 二 级 导航 ,这 对 于 具 
有 二 级 栏目 分 类 的 网 站 来 说 是 必要 的 。 过 去 下 拉 菜 单一 般 采 用 JavaScript 制作 ,而 现在 
由 于 浏览 器 对 CSS 支持 的 完善 ,一 般 使 用 CSS 来 制作 下 拉 菜 单 .CSS 下 拉 菜 单 具 有 代码 
简洁 、 占 用 资源 少 的 特点 。 





下 拉 菜 单 -最 终 效果 - Worills Firefox 





文件 加” 编 得 @) 查看 WD 历史 多 书签 B) 工具 C) 和 助 
学 参考 Blog 
E-cash 
微 支付 
混沌 加 密 








图 5-32 ”下拉 菜单 示例 


下 拉 菜 单 的 特点 是 弹出 时 悬浮 在 网 页 上 ,不 占据 网 页 空间 ,所 以 放置 下 拉 菜 单 的 元 素 
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必须 设置 为 绝对 定位 ,而 弹出 的 下 拉 菜 单 的 位 置 是 依据 它 的 导航 项 来 定位 的 ,所 以 导航 项 
应 该 设置 为 相对 定位 ,作为 下 拉 菜单 元 素 的 定位 基准 。 在 默认 状态 下 ,设置 下 拉 菜 单元 素 
的 display 属性 为 none, 使 下 拉 菜 单 被 隐藏 起 来 。 当 鼠标 指针 滑 到 导航 项 时 ,显示 下 拉 
菜单 。 

制作 下 拉 菜 单 的 步骤 比较 复杂 ,下 面 一 步 步 来 做 。 

(1) 下 拉 菜 单 通 常 采用 二 级 列表 结构 : 第 一 级 放 导航 项 ,第 二 级 放下 拉 菜 单项 。 首 
先 写 出 它 的 结构 代码 (5-24. html) ,此 时 显示 效果 如 图 5-33 所 示 。 


<ul id= "nav"> 
<li><a href=""> 文 章 </a> 
<ul> 
<1i><a href="">Ajax 教程 </a></1i> 


<1i><a href="">Flex 教程 </a></1i> 
</ul> 
</1i> 


<li><a href="">Blog</a> 
<ul> 
<1i><a href=""> 生 活 随想 </a>< /1i> 


<1i><a href=""> 随 意 写 < /a></1i> 
</ul> 
</1i> 
</ul> 








图 5-33 下 拉 菜 单 基 本 结构 


可 以 看 到 弹出 下 拉 菜 单 被 写 在 内 层 的 ul 里 ,只 需 控 制 这 个 ul 元素 的 显示 和 隐藏 就 


能 实现 下 拉 菜 单 效果 。 
(2) 设置 第 一 层 1i 元 素 左 浮 动 , 使 其 表示 的 导航 项 水 平 排列 ,同时 去 除 列 表 的 小 黑 
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点 .填充 和 边界 。 此 时 显示 效果 如 图 5-34 所 示 。 再 设置 导航 项 li 为 相对 定位 ,让 下 拉 菜 
单 以 它 为 基准 定位 。 代 码 (5-25. html) 如 下 : 


#nav, #nav ul { 
padding: 0; margin: 0; list- style: none;} 
124 
float: left; width: 160px; position:relative;} 








下 朱 菜 单一 水 平 持 列 -Herills FirsEs 
立 昔 EE Blog 
Aiar 教 程 了 -=esh 生活 随想 








Su 教 种 全 灯 
加 Ws 迹 芭 
了 ez 教程 区 翅 写 


图 5-34 下 拉 菜 单 水 平 排列 并 设置 第 一 级 1i 左 浮动 





(3) 设置 下 拉 菜 单 为 绝对 定位 ,位 于 导航 项 下 21px 的 位 置 。 默 认 状 态 下 隐藏 下 拉 菜 
单 ul, 所 以 ul 默认 是 不 显示 的 。 代 码 如 下 : 


li ul {display: none; /* 默认 不 显示 ul 元 素 * / 
Position: absolute; top: 21px;} 


(4) 再 添加 交互 , 当 鼠 标 指针 滑 入 时 显示 下 拉 菜 单 ul。 此 时 鼠标 指针 滑 入 时 就 会 弹 
出 下 拉 菜 单 了 ,如 图 5-35 所 示 ,只 是 不 太美 观 。 


li:hover ul {display: block;} /* 当 鼠 标 指针 滑 过 1i 时 显示 其 子 ul 元 素 * / 





文件 四 “篇 得 了) 查看 中。 历史 G) 书签 @) I 只 大 区 人 0 





文章 盘 考 Blog 
h 
Be 


5-35 ” 当 鼠 标 指针 滑 人 时 显示 下 拉 菜 单项 











(5) 最 后 为 下 拉 菜 单 设置 必要 的 CSS 样式 ,使 它 变 得 美观 ,并 添加 改变 背景 色 和 前 景 
色 的 交互 效果 ,代码 (5-26. html) 如 下 ,最终 显示 效果 如 图 5-32 所 示 。 


ul 1i af 
display:block; font- size:14px; color: #333; /* 设 置 文字 效果 * / 
text-align:center; text- decoration: none; 
border: lpx solid #ccc; padding:3px; 
height:lem; } /* 解决 IE6 的 pugx / 

ul li a:hover{ /* 鼠标 指针 滑 入 时 改变 菜单 项 背景 色 和 前 景色 x / 
background- color:#f4f4f4; color:red; } 
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想 一 想 

(1) 如 果 把 上 述 选 择 器 中 的 (position :relative; ) 和 (position:absolute; ) 都 去 掉 , 还 会 
有 上 面 的 下 拉 菜 单 效果 吗 ? 会 出 现 什么 问题 呢 ? 

(2) 把 控制 下 拉 菜 单 显示 和 隐藏 的 li:hover ul 改 成 a:hover~ul 将 会 是 什么 效果 呢 ? 

4. 图 片 放大 效果 

在 电子 商务 网 站 中 ,常常 会 以 缩 略 图 的 方式 展示 商品 。 当 浏览 者 将 鼠标 指针 滑动 到 
商品 缩 略图 上 时 ,会 把 缩 略 图 放大 显示 成 商品 的 大 图 ,通常 还 会 在 大 图 下 显示 商品 的 描述 


信息 ,如 图 5-36 所 示 。 这 种 展示 商品 的 图 片 放大 效果 非常 直观 友好 ,下 面 分 析 它 是 如 何 
制作 的 。 








图 5-36 带 有 文本 的 图 片 放 大 效果 


首先 ,商品 的 缩 略 图 的 排列 可 以 使 用 标准 流 方式 排列 ,但 商品 的 大 图 要 以 缩 略图 为 中 
心 进行 放大 ,所 以 要 以 缩 略图 为 定位 基准 ,因此 将 商品 的 缩 略 图 设置 为 相对 定位 。 而 商品 
的 大 图 是 浮 在 网 页 上 ,所 以 是 绝对 定位 元 素 。 在 默认 情况 下 ,商品 的 大 图 是 不 显示 的 , 当 
鼠标 指针 滑 到 缩 略 图 上 时 ,就 显示 商品 的 大 图 。 制 作 图 片 放 大 效果 的 步骤 如 下 。 

(1) 由 于 有 许多 张 图 片 ,因此 采用 列表 结构 来 组 织 这 些 图 片 , 每 个 列表 项 放 一 张 图 
片 。 因 为 图 片 要 响应 鼠标 指针 悬 停 , 所 以 在 它 外 面 要 包 庄 一 个 二 a 二 标记 。 结 构 代码 (5- 
27. html) 如 下 ,该 实例 的 最 终 效 果 如 图 5-37 所 示 。 


<ul id="lib"> 
<1li><a href="#"><img src="picl.jpg"/></a></li> 


<1li><a href="#"><img src="pic4.jpg"/></a></li> 
</ul> 





图 5-37 图 片 放大 效果 
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CSS 布局 


(2) CSS 样式 设计 : 主要 是 为 图 片 设置 边框 填充 ,设置 过 渡 效 果 , 并 设置 鼠标 指针 滑 
过 图 片 时 放大 img 元 素 ( 使 用 transform 属性 或 改变 元 素 的 宽 和 高 )。CSS 代码 如 下 : 


ul {margin: Opx; padding: Opx; list- style- type: none;} 


#1ib li { 
float: left; width:104px; height:104px; margin: 4px;} 
#1ib 1i a {position:relative;} /* 作为 其 img 子 元 素 的 定位 基准 * / 
#1iba img { 
border: lpx solid # ccc; padding: 6px; position: absolute; width: 90px; 
height:90px 
left:0; top:0; background- color:#fff; transition:all .3s ease- in; 
transform- origin: center;} /* 以 中 心 点 为 基准 放大 * / 


#1ib a:hover img { 
z-index:999; transform:scale (1.5); 
box- shadow: 0 5px 10px rgba(0,0,0,0.3);} 


如 果 不 是 对 图 片 本 身 放大 ,而 是 在 图 片 劳 边 弹出 一 张大 图 , 则 需要 在 img 标记 旁边 
插入 一 个 span 标记 ,用 span 标记 的 背景 来 放置 大 图 ,用 “a:hover span”" 来 控制 大 图 的 显 
示 和 隐藏 ,整体 思路 和 实现 小 提示 窗口 相似 ,只 是 把 文字 换 成 图 像 了 。 

5. 课程 展示 框 

很 多 茶 课 、 微 课 、 精 品 课 网 站 都 需要 使 用 图 文 并 茂 的 课程 展示 框 对 课程 进行 展示 ,并 
具有 良好 的 用 户 交 互 效果 ,图 5-38 是 一 种 课程 展示 框 的 效果 ,初始 时 ,文本 区 域 倒 放 在 图 
片上 方 的 底部 , 当 鼠 标 指针 悬 停 时 ,文本 区 域 向 上 伸展 ,显示 全 部 内 容 。 





5-38 课程 展示 框 的 效果 


制作 思路 : 用 一 个 div 元 素 表示 课程 展示 框 , 在 该 div 中 插入 一 个 img 元 素 和 一 个 类 
名 为 show 的 元 素 , 用 于 放置 文本 。 由 于 show 元 素 要 又 放 在 img 元 素 上 方 , 因 此 设置 
show 元 素 绝对 定位 ,把 外 层 的 div 元 素 设 置 为 相对 定位 ,作为 它 的 定位 基准 。 当 鼠标 县 
停 时 ,改变 show 元 素 的 top 属性 .使 它 向 上 伸展 。 结 构 代码 (5-28. htm]) 如 下 : 


<div class="main img"> <!-- 课 程 展示 框 --> 
<img src= "img/h2.jpg"> 片 --> 
<div class="show"><h2>C 语 言 程序 设计 </h2> <!-- 文 本 区 域 --> 
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<span class= "txtRrean><a href= "#"> 观 看 视频 < /a>< /span> 





</div> 
</div> 
CSS 代码 主要 是 设置 图 片 框 大 小 ,过 渡 属 性 、 阴 影 等 ,代码 如 下 : 





-main img{ 
height: 230px; width: 360px; overflow:hidden; position: relative; 
display:inline-block; margin- left:10px; /* 让 多 个 课程 展示 框 水 平 排列 * / 
box- shadow: 0 5px 10px 0 rgba (0,0,0,0.1); 
transition: all .5s;} 
"main img:hoverf 
box- shadow: 0 5px 20px rgba(0,0,0,0.3);} /* 增 大 课程 展示 框 阴 影 * / 
.show { 
background: rgba(125, 0, 0, 0.3); position: absolute; 
left: 0;top: 80%; height:230px; width:360px; z-index: 200; 
transition: top .3s ease- in;} 
.Show h2{font- size:16px; text-align:center; color:white;} 
-main img img { 
transition:all .3s ease- in; 
width:100%; height:auto;} 





main img:hover img {opacity: 


7; transform:scale (1.1);} /* 放大 变 透明 * / 
.main img:hover .show {top: 50%;} /* 向 上 伸展 a 元 素 */ 
.Show .txtArea { 


left: 50%; bottom:20%; margin:-15px Opx 0px ~ 40px; position: absolute; 
transition:all .3s ease- in;} 
.Show .txtArea af 
color:rgba (255, 255, 255, 0.8); display:block; 
padding:5px 12px; border:rgba (255, 255, 255, 0.6)1px solid; 
border- radius:8px; font- size: 16px; text- decoration:none;} 
.Show .txtArea a:hover{ 
background: rgba (255, 255,255, 0.7); color:rgba(0,0,0, 0.6);} 
.main img:hover .show .txtArea{opacity:1;filter:alpha (opacity=100) ;bottom:60%;} 


6. hover 伪 类 的 应 用 总 结 


hover 伪 类 是 通过 CSS 实现 与 页 面 交互 的 最 主要 形式 ,本 节 的 所 有 实例 中 都 用 到 了 
hover 伪 类 ,下 面 总 结 一 下 hover 伪 类 的 作用 。hover 伪 类 的 作用 分 为 两 种 : 

一 是 定义 元 素 在 鼠标 指针 滑 过 时 样式 的 改变 ,以 实现 动态 效果 ,这 是 hover 伪 类 的 基 
本 用 法 ,如 鼠标 指针 滑 过 导航 项 时 让 导航 项 的 字体 和 背景 变色 等 。 

二 是 通过 hover 伪 类 控制 子 元 素 或 兄弟 元 素 的 动态 效果 。 有 时 如 果子 元 素 通 过 
display:none 隐藏 起 来 了 ,就 没有 办 法 利用 子 元 素 自身 的 hover 伪 类 来 控制 它 了 ,只 能 使 
用 父 元 素 的 hover 伪 类 对 它 进行 控制 ,例如 下 拉 莱 单 中 的 li:hover ul。 
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hover 伪 类 不 能 做 什么 : hover 伪 类 只 能 控制 自身 或 其 子 元 素 、 兄 弟 元 素 在 鼠标 指针 
滑 过 时 的 动态 效果 ,而 无 法 控制 其 他 不 相关 元 素 实现 动态 效果 ,例如 tab 面板 由 于 要 用 
tab 项 (a 元素 ) 控 制 不 属于 其 包含 的 div 元 素 ,就 无 法 使 用 hover 伪 类 实现 ,而 只 能 通过 编 
写 JavaScript 代码 来 操纵 a 元 素 的 行为 实现 。 


5.4.3 固定 定位 


position 属性 值 fixed 表示 固定 定位 ,fixed 总 是 以 浏览 器 窗口 作为 定位 基准 的 ,因此 
固定 定位 元 素 不 会 随 着 网 页 的 滚动 而 滚动 ,而 绝对 定位 元 素 默 认 是 以 body 元 素 为 定位 
基准 的 ,因此 会 随 着 网 页 的 滚动 而 滚动 。 

固定 定位 适合 于 网 页 中 不 随 滚动 条 滚动 的 元 素 , 比 如 图 5-39 所 示 的 百度 的 顶部 搜索 
栏 ,无 论 怎样 滚动 网 页 ,搜索 栏 总 是 位 于 顶部 。 





6909 
Bai 作 百度。 fyme6 root 











美女 与 间谍 : 川 岛 芳子 与 她 的 同事 


\ 固定 定位 





实时 热点 
菲 佣 雇佣 乱 象 


A ss -Ze 杨 焕 宁 严重 违纪 
图 5-39 百度 的 顶部 搜索 栏 (固定 定位 实例 ) 








还 有 某 些 网 页 中 的 “返回 顶部 ”按钮 ,其 实现 原理 也 是 利用 固定 定位 使 其 不 随 网 页 滚 
动 , 其 实现 代码 (5-29. html) 如 下 : 


.totop{ width:40px; height:40px; background:#FCC; text-align:center; 
position:fixed;right:30px; bottom:100px; } /* 元 素 固定 定位 ,定位 基准 为 右 下 角 * / 
.totop a{text- decoration:none;color:white; } 

<div class="totop"><a href="#"> 返 回 顶 部 </a></div> 


5.4.4 与 定位 属性 有 关 的 CSS 属性 


CSS 中 ,有 几 个 属性 只 有 在 元 素 设置 了 定位 属性 (position) 之 后 才 有 效 , 例 如 ,z-index 
属性 、 偏 移 属 性 (top \left 等 ) 和 裁 切 属性 (clip) 等 。 

在 DW 中 ,对 这 些 与 position 相关 的 属性 设置 在 “定位 ”选项 面板 中 ,其 中 ,“ 宽 "和 
“高 ?对 应 width 和 height 属性 ,实际 上 这 两 项 的 设置 在 “ 方 框 ” 面 板 中 也 有 。“ 裁 切 ” 可 用 
来 对 图 像 或 其 他 盒子 进行 前 切 , 但 仅 对 绝对 定位 元 素 有 效 。“ 显 示 ” 对 应 visibility 属性 ， 
若 设 置 为 隐藏 , 则 元 素 不 可 见 , 但 元 素 所 占 的 位 置 仍然 会 保留 。 
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1. z-index 属性 


z-index 属性 用 于 调整 定位 时 重 和 至 块 之 间 的 释放 次 序 。 与 它 的 名 称 一 样 , 想 象 页 面 为 
x-y 轴 , 那 么 垂直 于 页 面 的 方向 就 为 z 轴 ,z-index 值 大 的 元 素 盒 子 会 释放 在 值 小 的 盒子 的 
上 方 , 如 图 5-40 所 示 。 可 以 通过 设置 z-index 值 改变 盒子 之 间 的 重 释 次序。z-index 默认 
值 为 0, 当 两 个 盒子 的 z-index 值 一 样 时 , 则 保持 原来 的 高 低 覆 盖 关系 。 





z-index 值 -1 














z-index 值 2 





z-index 值 8 














5-40 ”z-index 值 的 作用 


2. 制作 动态 改变 又 放 次 序 的 导航 条 


利用 z-index 属性 改变 盒子 释放 次 序 的 功能 ,可 以 制作 出 如 图 5-41 所 示 的 导航 条 来 。 
该 导航 条 由 若干 个 导航 项 和 下 部 的 水 平 条 组 成 。 水 平 条 是 一 个 绝对 定位 元 素 ,通过 设置 
它 的 位 置 使 它 正 好 全 放 在 导航 项 的 底部 。 在 默认 状态 下 ,导航 项 的 下 方 被 水 平 条 覆盖 ( 导 
航 项 设置 为 相对 定位 ), 当 鼠标 指针 滑 过 某 个 导航 项 时 ,设置 导航 项 的 z-index 值 变 大 ,这 
样 该 导航 项 就 会 遮盖 住 水 平 条 ,形成 如 图 5-41 所 示 的 动态 效果 。 


首页 | 中 心 商 介 6 





图 5-41 动态 改变 z-index 属性 的 导航 条 


下 面 分 步 来 讲解 如 何 制作 动态 改变 层 和 次 序 的 导航 条 。 

(1) 首先 ,因为 z-index 只 对 设置 了 定位 属性 的 元 素 有 效 , 所 以 导航 项 和 水 平 条 都 要 
设置 定位 属性 。 每 个 导航 项 的 位 置 应 该 保持 它 在 标准 流 中 的 位 置 不 变 , 因 此 设置 它们 为 
相对 定位 ,不 设置 偏 移 属性 。 而 水 平 条 要 释放 在 导航 项 的 上 方 ,不 占据 网 页 空间 ,因此 设 
置 它 为 绝对 定位 。 而 且 水 平 条 要 以 整个 导航 条 为 基准 进行 定位 ,所 以 设置 整个 导航 条 
〈 间 mnav 元 素 ) 为 相对 定位 ,作为 水 平 条 的 定位 基准 。 结 构 代码 (5-30. htmlD 如下: 


<div id="nav"> <!-- 主 要 是 作为 底部 水 平 条 的 定位 基准 --> 
<a href="#"><span> 首 页 </span></a> <!-- 导 航 项 背景 采用 滑动 门 技术 --> 
<a href="#"><span> 中 心 简介 </span>< /a> 
<a href="#"><span> 技 术 支持 </span></a> 
<div id= "bott"></div> <!-- 底 部 的 水 平 条 --> 

</div> 


(2) 接 下 来 编写 导航 条 # nav 和 它 包含 的 水 平 条 的 CSS 代码 ,# nav 只 要 设置 为 相对 
定位 就 可 以 了 ,作为 水 平 条 # bott 的 定位 基准 ,而 #bott 设置 为 绝对 定位 后 必须 向 下 偏 
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移 28px, 这 样 正好 番 放 于 导航 项 的 下 部 。 


#nav {position:relative; /x 作为 定位 基准 */ } 
#bott{ 
background- color: #996; height:6px; /* 水 平 条 高 度 为 6pxx / 
clear:both; /* 由 于 a 元 素 都 浮动 ,所 以 要 清除 浮动 * / 
position:absolute; top:28px; 
width:95%;} /* 绝对 定位 元 素 宽度 不 会 自动 伸展 ,设置 宽度 使 其 占 满 一 行 * / 


(3) 用 滑动 门 技 术 设 置 a 元 素 和 span 元 素 的 背景 ,背景 图 片 如 图 5-42 所 示 。 其 中 
span 元 素 的 背景 从 古 往 左 铺 ,a 元素 的 背景 从 左 往 右 铺 ,一 加 后 形成 自 适应 宽度 的 圆 角 导航 
项 背景 。 再 设置 a 元 素 为 相对 定位 ,以 便 鼠 标 指针 滑 过 时 能 设置 z-index 值 。 代 码 如 下 : 


#nava { 
position:relative; /* 设 置 为 相对 定位 ,为 了 应 用 z-index 属性 * / 
float: left; /* 使 a 元 素 水 平 排列 * / 


padding- left: 14px; 
background: url (images/zindex.gif) 0 - 42px; 


/* 取 下 半 部 分 的 图 案 作 背景 * / 
height:34px; 
line- height:28px; /* 行 高 比 高 度 小 ,使 文字 位 于 中 部 偏 上 * / 
color:white; text- decoration:none; 1 


#nav span { 
padding- right:14px; font- size:14px; 
background: url (images/zindex.gif) 100% -42px; 
float:left; /* 此 处 是 为 兼容 IE6, 防 止 span 占 满 整 行 * / 


图 5-42 导航 条 的 背景 图 片 (zindex. gif) 


(4) 最 后 设置 鼠标 滑 过 时 的 效果 ,包括 设置 z-index 值 改 变 重 秋 次序, 改变 背 景 显示 
位 置 实现 背景 图 像 的 翻转 等 。 代 码 如 下 : 


#nav a:hover { 


cursor:hand; /* 使 IE6 中 光标 变 为 手 形 x* / 
background- position:0 0; /=< 取 上 半 部 分 图 像 作为 背景 * / 
z-index:1000; /* 使 鼠标 指针 悬 停 的 导航 项 谈 盖 住 水 平 条 * /} 


#nav a:hover span { 
height:34px; color:#f007 
background-position:100% 0; /* 取 下 半 部 分 图 像 作为 背景 ,实现 背景 的 翻转 * /} 
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这 样 动态 改变 层 三 次 序 的 导航 条 就 做 好 了 ,如 果 将 导航 条 的 背景 图 片 制作 成 具有 半 
透明 效果 的 png 格式 文件 ,效果 可 能 会 更 好 。 


5.4.5 overflow 属性 


对 于 一 个 元 素来 说 ,如 果 设 置 了 它 的 宽 和 高 , 则 元 素 的 大 小 就 确定 了 ,那么 元 素 有 可 
能 容纳 不 下 它 的 内 容 。 在 这 种 情况 下 ,CSS 提供 了 溢出 属性 overflow 用 来 设置 元 素 的 内 
容 超 过 其 大 小 时 如 何 管理 内 容 。 

overflow 的 基本 功能 是 设置 元 素 盒子 中 的 内 容 如 果 滋 出 是 否 显 示 , 默 认 值 为 visible， 
表示 元 素 的 溢出 内 容 将 显示 出 来 。 其 他 取 值 有 hidden( 隐 藏 ) scroll( 滚 动 条 ) auto( 自 
动 )。 将 下 面 代码 (5-31. html) 中 overflow 值 依 次 修改 为 visible、hidden、scroll、auto, 显 示 
效果 如 图 5-43 所 示 。 


#qq { 

border:1px solid #333; height: 100px; width: 100px; 

overflow: visible; } /* 依次 修改 为 hidden、scroll、autox/ 
<div id="qq"> 在 一 个 遥远 而 古老 的 国度 里 ,国王 和 王后 …*…< /div> 


BE -ox EE -ox 
文件 四 扩 强 区 文件 中 名 旬 下 文件 中 六 加 区 


硅 一 个 这 远 而 一 不通 远 国 一 个 前 还 加 
估 老 的 国度 而 古老 的 国 而 古老 的 国 
里 ， 国 王 和 王 里 ， 国 王 里 ， 国 王 
后 因为 性 格 不 王后 因为 王后 因为 
而 离婚 ， 国 格 不 和 而 对 格 不 和 而 
于 而 到 了 一 Ar| - 2 之 


图 5-43 overflow 属性 值 依 次 为 visible hidden scroll auto 的 效果 




















在 CSS3 中 ,新 增 了 overflow-x 和 overflow-y 属性 ,用 来 分 别 控制 水 平方 向 和 垂直 方 
向 的 溢出 处 理 ,例如 overflow-y: scroll 表示 出 现 竖 直 滚 动 条 。 但 是 当 overflow-x 和 
overflow-y 属性 值 中 一 个 是 hidden、 另 一 个 是 visible 时 , 则 IE 和 其 他 浏览 器 泻 染 效果 会 
不 同 。 
overflow 属性 的 另 一 种 功能 是 用 来 代替 清除 浮动 的 元 素 。 
如 果 父 元 素 中 的 子 元 素 都 浮动 ,那么 会 导致 父 元 素 高 度 不 会 自动 伸展 包含 住 子 元 素 ， 
在 5.1.3 节 中 说 过 ,可 以 在 这 些 浮动 的 子 元 素 后 面 添加 一 个 清除 浮动 的 元 素来 把 外 围 盒 
子 撑 开 。 实 际 上 ,通过 对 父 元 素 设 置 overflow 属性 也 可 以 扩展 外 围 盒子 高 度 , 从 而 代替 
了 清除 浮动 元 素 的 作用 。 示 例 (5-32. html) 如 下 : 
div{ 
padding:10px; margin:10px; border:1px dashed #111; 
background- color:#90baff; } 
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-father{ 

background- color:#ffff99; border:1px solid #111; 

overflow:auto; /* 图 5-44( 左 ) 是 未 添加 这 句 时 的 效 
果 */} 
.sonl{ 


float:left; } 
<div class="father"> 

<div class="sonl1">Box- 1</div> 
</div> 


可 见 , 对 父 元 素 设 置 overflow 属性 为 auto 或 hidden 时 ,就 能 达到 扩展 外 围 盒子 高 度 
的 效果 ,如 图 5-44( 右 ) 所 示 , 这 比 专门 在 浮动 元 素 后 添加 一 个 清除 浮动 的 空 元 素 要 简单 
得 多 。 尽 管 如 此 ,在 实际 网 页 中 ,使 用 overflow 清除 浮动 容易 带 来 其 他 一 些 问题 ,因此 建 
议 还 是 使 用 常规 的 clear 属性 清除 浮动 。 





























图 5-44 利用 overflow 属性 扩展 外 围 盒子 高 度 之 前 ( 左 ) 和 之 后 ( 右 ) 的 效果 


另外 ,在 浮动 元 素 后 面 添加 一 个 元 素 , 并 对 其 设置 overflow:hidden, 也 将 具有 清除 浮 
动 的 效果 ,读者 可 以 对 图 5-44 中 对 应 的 代码 进行 修改 来 验证 这 一 点 。 

由 于 IE6 对 于 空 元 素 的 默认 高 度 是 12px, 所 以 经 常 使 用 (overflow:hidden) 使 空 元 素 
在 IE6 中 所 占 高 度 为 0。 


5.4.6 vertical-align 属性 


有 时 可 能 希望 容器 内 的 文本 垂直 居中 显示 ,对 于 单行 文本 来 说 ,只 要 设置 它 的 line- 
height 属性 就 可 以 了 ,例如 ,line-height:80px 就 能 使 单行 文本 在 高 为 80px 的 容器 中 垂直 
居中 。 顺 便 说 一 句 , 如 果 height 与 line-height 属性 值 相等 ,完全 可 以 把 height 属性 省 略 。 
也 就 是 说 ,如 果 不 存在 height 属性 ,那么 元 素 的 高 度 值 将 由 line-height 决定 。 

对 于 多 行文 本 来 说 ,就 无 法 通过 line-height 属性 来 垂直 居中 了 。 当 然 , 如 果 是 固定 
宽度 的 容器 , 则 可 以 通过 调整 容器 的 上 下 padding 值 使 文本 近似 于 垂直 居中 。 

但 是 , 随 着 可 变 宽度 网 页 布局 的 流行 ,很 多 容器 的 宽度 是 可 变 的 (高 度 固 定 ) ,导致 容 
器 中 的 文本 行 数 是 变化 的 ,如 开始 的 时 候 是 一 行文 本 , 当 容 器 变 窗 后 逐渐 变 成 两 行 、 三 行 
文本 。 这 种 情况 下 就 无 法 通过 上 下 padding 值 来 伪装 垂直 居中 了 。 


1. 实现 多 行文 本 垂直 居中 
多 行文 本 垂直 居中 还 是 有 一 些 解决 办 法 的 。 比 如 使 用 vertical-align( 垂 直 对 齐 ) 属 
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性 ,但 该 属性 有 一 个 很 大 的 “缺点 ”, 就 是 对 于 块 级 元 素 是 无 效 的 。 

vertical-align 属性 只 能 应 用 于 行内 元 素 、 行 内 块 元 素 或 表格 单元 格 元 素 。vertical- 
align: middle 表示 垂直 居中 。vertical-align 实现 多 行文 本 垂直 居中 的 代码 (5-33. html) 
如 下 : 


div{ height: 200px; width: 50%; /* 可 变 宽度 容器 * / 
background- color: pink; text-align: center; padding:8px;} 

span{ display:inline-block; vertical-align: middle; line-height: 1.8em;} 

if display: inline-block; height: 100%; vertical-align: middle;} 

<qiv><i></i><span> 我 是 特别 长 的 特别 长 …… 的 文本 < /span></div> 


还 有 一 种 简单 的 文本 垂直 居中 的 方法 是 对 容器 元 素 设置 如 下 属性 即 可 : 


div{… display:table-cel1; vertical-align:middle; } 


2. 小 图 标 与 文本 横向 对 齐 


如 果 小 图 标 与 文本 在 一 行 中 ,通常 希望 两 者 的 垂直 中 心 点 在 同一 条 水 平 线 上 ,此 时 可 
以 对 img 元 素 使 用 vertical-align 属性 进行 精确 的 纵向 偏 移 调整 ,代码 如 下 : 


img{ vertical-align:- 8px;} /* 负 值 会 使 图 片 往 下 移动 * / 
<p><img src="images/r12.png"/> 这 是 和 图 片 在 同一 行 中 的 文本 < /p> 


3. 实现 上 标 或 下 标 文字 


在 HTML 元 素 中 ,二 sub 之 和 过 sup 过 分别 表示 下 标 和 上 标 ,实际 上 ,这 两 个 元 素 是 
因为 具有 以 下 浏览 器 默认 样式 ,因此 完全 可 以 对 其 他 元 素 也 设置 这 些 样式 变 成 下 标 或 
上 标 。 


sub { vertical-align: sub; font- size: smaller;} 


5.5 CSS 分 栏 布局 


使 用 CSS 布局 时 , 先 不 要 考虑 网 页 的 外 观 ,而 应 该 先 思考 网 页 内 容 的 语义 和 结构 。 
因为 一 个 结构 良好 的 HTML 页 面 可 以 通过 任何 外 观 表 现 出 来 。 

虽然 普通 用 户 看 到 的 网 页 上 有 文字 、 图 像 等 各 种 内 容 。 但 对 于 浏览 器 来 说 , 它 “ 看 到 ” 
的 页 面 内 容 就 是 大 大 小 小 的 盒子 。 对 于 CSS 布局 而 言 , 本 质 就 是 大 大 小 小 的 盒子 在 页 面 
上 的 摆 放 。 我 们 看 到 的 页 面 中 的 内 容 不 是 文字 ,也 不 是 图 像 ,而 是 一 堆 盒 子 。 要 考虑 的 就 
是 盒子 与 盒子 之 间 的 关系 ,是 上 下 排列 左右 排列 还 是 嵌 套 排列 ,是 通过 标准 流 定位 还 是 
通过 浮动 ` 绝 对 定位 、 相 对 定位 实现 ,定位 基准 是 什么 等 。 将 盒子 之 间 通 过 各 种 定位 方式 
排列 使 之 达到 想 要 的 效果 就 是 CSS 布局 的 基本 思想 。 
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CSS 网 页 布局 的 基本 步骤 如 下 : 

(1) 将 页 面 用 div 分 块 ; 

(2) 通过 CSS 设计 各 块 的 位 置 和 大 小 ,以 及 相互 关系 ; 
(3) 在 网 页 的 各 大 div 块 中 插入 作为 各 个 栏目 框 的 小 块 。 
表 5-2 对 表格 布局 和 CSS 十 DIV 布局 的 特点 进行 了 比较 。 


表 5-2 表格 布局 和 CSS 布局 的 比较 
比较 项 目 表格 布局 CSS 十 DIV 布局 


布局 方式 将 页 面 用 表格 和 单元 格 分 区 将 页 面 用 div 等 元 素 分 块 


控制 元 素 占据 | 通过 二 td 二 标记 的 width 和 
的 页 面 大 小 height 属性 确定 


控制 元 案 在 页 | 天 和 合 元素 位 盆 向 稍 动 .或 揪 | 设置 元 素 的 margin 属性 或 设置 其 父 元 来 的 
面 中 的 位 置 | 信行 或 上 位 宕 格 合 元 来 向 下 | padding 属性 使 元 素 移 到 指定 位 置 ,对 于 单行 
文本 ,还 可 用 text-indent 移动 其 位 置 











通过 CSS 属性 width 和 height 确定 














移动 
图 片 的 位 置 只 能 通过 图 片 所 在 单元 格 的 位 | 既 可 以 通过 图 片 所 在 元 素 的 位 置 确定 ,又 可 以 
置 控 制图 片 的 位 置 使 用 背景 的 定位 属性 移动 图 片 的 位 置 


5.5.1 分 栏 布局 的 种 类 


网 页 的 布局 从 总 体 上 说 可 分 为 固定 宽度 布局 和 可 变 宽度 布局 两 类 。 所 谓 固 定 宽度 ， 
是 指 网 页 的 宽度 是 固定 的 ,如 1200px', 不 会 随 浏览 器 大 小 的 改变 而 改变 ;而 可 变 宽度 是 指 
如 果 浏 览 器 窗口 大 小 发 生变 化 ,网 页 的 宽度 也 会 变化 ,例如 将 网 页 宽度 设置 为 855%% ,表示 
它 的 宽度 永远 是 浏览 器 宽度 的 85%。 

固定 宽度 的 好 处 是 网 页 不 会 随 浏览 器 大 小 的 改变 而 发 生变 形 ,窗口 变 小 只 是 网 页 的 
一 部 分 被 遮盖 住 ,固定 宽度 布局 的 实现 原理 简单 ,适合 于 初学 者 使 用 。 而 可 变 宽 度 布局 的 
好 处 是 能 适应 各 种 显示 器 屏幕 ,不 会 因为 用 户 的 显示 器 过 宽 而 使 两 边 出 现 很 宽 的 空白 区 
域 。 随 着 用 户 显 示 设 备 的 多 样 化 ,可 变 宽度 布局 已 经 变 得 更 为 流行 和 实用 。 

以 1-3-1 式 3 列 布局 为 例 , 它 具有 的 布局 形式 如 图 5-45 所 示 。 


3 列 






























































| 
固定 宽度 可 变 宽度 
等 比例 单列 固定 单列 变 宽 
中 列 固 定 侧 列 固定 中 列 变 宽 侧 列 变 宽 






































图 5-45 1-3-1 式 布局 所 有 的 种 类 
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5.5.2 网 页 居中 的 方法 

通常 情况 下 ,网 页 在 浏览 器 中 最 好 能 够 居中 显示 ,通过 CSS 实现 网 页 居中 主要 有 以 
下 3 种 方法 。 

1.text-align 法 


这 种 方法 设置 body 元 素 的 text-align 值 为 center, 这 样 body 中 的 内 容 ( 整 个 网 页 ) 就 
会 居中 显示 。 由 于 text-align 属性 具有 继承 性 ,网 页 中 各 个 元 素 的 内 容 也 会 居中 显示 ,这 
是 我 们 不 希望 看 到 的 ,因此 设置 包含 整个 网 页 的 容器 # container 的 text-align 值 为 left。 
代码 如 下 : 


body{text-align:center;min- width:990px;} 
#container {margin:0 auto;text-align:left;width:990px;} 
2. 左右 margin auto 法 


通过 设置 包含 整个 网 页 的 容器 # container 的 margin 值 为 “0 auto”, 即 上 下 边界 为 0， 
左右 边界 自动 ,再 配合 设置 width 属性 为 一 个 固定 值 或 相对 值 , 也 可 以 使 网 页 居中 ,从 代 
码 量 上 看 ,这 是 使 网 页 居中 的 一 种 最 简洁 的 办 法 。 例 如 : 


#container { margin: 0 auto; width: 980px; } /* 固定 宽度 网 页 * / 
#container { margin: 0 auto; width: 85%; } /* 可 变 宽度 网 页 * / 


注意 : 如 果 仅 设置 # container { margin: 0 auto; } ,而 不 设置 width 值 , 网 页 是 不 会 
居中 的 ,而 且 使 用 该 方法 网 页 顶部 一 定 要 有 文档 类 型 声明 DOCTYPE ,否则 在 IE6 中 不 会 
居中 。 


3. 相对 定位 法 


相对 定位 法 居中 在 5. 3. 3 节 中 已 经 介绍 过 , 它 只 能 使 固定 宽度 的 网 页 居中 。 代 码 
如 下 : 


#container { Position: relative; width:980px; left: 50%; margin- left: 
—490px; } 


5.5.3 1-3-1 版 式 网 页 布局 


1-3-1 版 式 网 页 布局 有 4 种 方法 : 3 列 浮动 法 ,margin 负 值 法 绝对 定位 法 和 左右 列 
浮动 法 。 
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1. 3 列 浮动 法 


在 默认 情况 下 ,div 作为 块 级 元 素 会 占 满 整 行 从 上 到 下 依次 排列 ,但 在 网 页 的 分 栏 布 
局 中 (例如 1-3-1 版 式 布局 ) ,中 间 3 栏 必须 从 左 到 右 并 列 排列 ,这 时 就 需要 将 中 间 3 栏 (3 
个 div 盒子 ) 都 设置 为 浮动 。 

但 3 个 div 盒子 都 浮动 后 ,只 能 浮动 到 窗口 的 左边 或 右边 ,无 法 在 浏览 器 中 居中 。 为 
此 ,需要 在 3 个 盒子 外 面 再 套 一 个 盒子 ( 称 为 container) ,让 container 居中 ,这样 就 实现 了 
3 个 div 盒子 在 浏览 器 中 居中 ,如 图 5-46 所 示 。 





bod 
header 








container 





left main right 



































footer 





图 5-46 1-3-1 布局 示意 图 


注意 : 由 于 container 里 面 的 3 个 金子 都 浮动 ,脱离 了 标准 流 , 所 以 都 没有 占据 
container 容器 的 空间 。 从 结构 上 看 ,应 该 是 container 位 于 3 个 盒子 的 上 方 , 但 这 并 不 妨 
碍 用 container 控制 里 面 浮 动 的 盒子 居中 。 为 了 方便 对 页 面 主体 (container) 设 置 背 景色 ， 
实现 如 图 5-46 中 container 包含 住 3 个 念 子 的 效果 ,通常 在 container 内 3 个 盒子 下 方 再 
添加 一 个 清除 浮动 的 元 素 (或 伪 元 素 )。 

下 面 是 1-3-1 固定 宽度 布局 的 参考 实现 代码 (5-34. html) ,效果 如 图 5-47 所 示 。 


#header, #footer, #container{ 


margin:0 auto; width:980px; /* 实现 水 平 居中 * / 

height:100px;background:#ffe6b8; /* 背景 和 高 度 为 演示 需要 * / } 
#container{ height:300px; background:#fff;} 
#1left, #main, #right{ 

background:#a0b3d6; height:100%;width:210px; 

float:left; /关键 点 :设置 3 列 浮动 * / } 
#main{ 


width:540px;background:#eee; margin:0 10px } 
#container::after{ 

clear:both; content:""; /* 使 container 能 包含 住 3 列 * /} 
<div id="header">header 页 头 </div> 
<div id="container"> 

<div id= "left"> left 栏 </div> 
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<div id= "mainn>main 栏 </div> 
<div id="right">right 栏 </div> 
</div> 
<div id="footer"> footer 页 尾 </div> 


header 页 头 


main 栏 


footer 页 尾 
图 5-47 1-3-1 浮动 方式 布局 效果 图 


制作 1-3-1 浮动 布局 的 方法 还 有 很 多 变形 ,例如 可 以 将 footer 块 放 到 container 块 里 
面 , 这 样 可 设置 footer 元 素 清除 浮动 ,使 container 块 包含 住 里 面 的 3 列 和 footer 块 。 

提示 : 如 果 要 为 3 列 设置 margin 属性 ,以 使 3 列 之 间 有 间隙 , 则 最 好 给 3 列 都 增加 
一 条 display:inline 的 属性 ,否则 IE6 浏览 器 会 出 现 浮动 金子 的 双 倍 margin 问题 ,导致 最 
后 一 列 容纳 不 下 而 移 到 下 一 行 去 。 


2. margin 负 值 法 


这 种 方法 将 中 间 的 主体 栏 使 用 双 层 标记 嵌 套 ,外 层 元 素 宽度 为 100% ,并 且 左 浮动 。 
内 层 div 为 真正 的 主体 区 域 ,设置 其 左右 margin 为 210px。 左 右 两 栏 也 都 左 浮动 ,这 样 左 
右 两 栏 初始 时 将 位 于 主体 外 的 右 侧 , 并 且 由 于 主体 占据 浏览 器 100% 的 空间 ,因此 左右 两 
栏 将 位 于 浏览 器 窗口 外 的 右 侧 , 而 被 隐藏 起 来 。 然 后 再 利用 负 margin 法 将 左右 两 栏 拖 动 
到 左右 两 栏 的 对 应 位 置 。 其 结构 代码 (5-35. html) 如 下 : 


<div id="main"> 


<div id="content"></div> <!-- 中 间 栏 --> 
</div> 
<div id="left"></div> <!-- 左 侧 栏 --> 
<div id="right"></div> <!-- 右 侧 栏 --> 
CSS 代码 如 下 : 


#main{width:100%; height:100%; float:left;} 

#main #content {margin:0 210px; background:#ffe4cl; height:100%;} 

#1left, #right {width:200px; height:100%; float:left; background:#a0bld3;} 
#1left{margin- left:-100%;} /* 拖 动 到 浏览 器 窗口 的 左上 角 * / 
#right {margin— left:—200px;} 


本 例 中 3 列 占 满 浏览 器 的 100% 空 间 , 如 果 希 望 不 占 满 整 个 浏览 器 ,左右 留 白 ,只 需 
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在 3 列 外 再 套 一 个 container 元 素 , 设 置 其 宽度 (如 width:85%) 和 margin 负 值 法 居中 
即 可 。 


3. 绝对 定位 法 


两 侧 列 固定 .中 间 列 变 宽 的 1-3-1 式 布 局 也 是 一 种 常用 的 布局 形式 ,这 种 形式 的 布局 
通常 是 把 两 侧 列 设 置 成 绝对 定位 元 素 , 并 对 它们 设置 固定 宽度 。 例 如 左右 两 列 都 设置 成 
200px 宽 ,而 中 间 列 不 设置 宽度 ,并 设置 它 的 左右 margin 都 为 210px, 使 它 不 被 两 侧 列 所 
遮盖 。 这 样 它 就 会 随 着 网 页 宽度 的 改变 而 改变 ,因而 被 形象 地 称 为 液态 布局 。 其 结构 代 
码 和 1-3-1 固定 宽度 布局 一 样 ,代码 (5-36. html) 如 下 : 





<div id="header"><h2>Page Header</h2></div> 
<div id="container"> 
<div id="left"></div> 
<div id="main"></div> 
<div id="right"></div> 
</div> 
<div id="footer"><h2> Page Footer</h2></div> 


然后 将 container 设置 为 相对 定位 ,将 左右 两 列 设置 为 绝对 定位 , 则 左右 两 列 以 
container 为 定位 基准 。 实 现代 码 如 下 。 


#1eft,#Fight{position:absolute; top:0; width:200px; height:100%;} 
#1left {left:0; background:#a0b3d6;} /* 左 侧 列 定位 为 左上 角 * / 
#right {right:0; background:#a0b3d6;} /* 右 侧 列 定位 为 右上 角 x* / 
#main{margin:0 210px; background:#ffe6b8; height:100%; } 


#container { 


width:85%; margin:0 auto; /* 网 页 居中 x*/ 
background- color:orchid; height:100%; 
position: relative; /* 设置 为 左右 两 列 的 定位 基准 * / 


} 


4. 左右 列 浮动 法 


这 种 方法 将 左右 列 放 在 中 间 列 的 前 面 , 然 后 让 左右 列 分 别 浮动 到 页 面 的 左 侧 和 右 侧 ， 
这 样 左右 列 不 占据 网 页 空间 ,中 间 列 就 会 项 到 页 面 上 方 去 ,再 设置 中 间 列 的 左右 margin， 
使 得 中 间 列 和 左右 列 不 重 倒 。 代 码 (5-37. html) 如 下 : 





#main{height:100%; margin:0 210px; background:#ffe6b8;} 
#1left,#right {width:200px; height:100%; background:#a0b3d6;} 
#1left{float:left;} 

#right{float:right;} 

<div id="left"></div> 
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<div id="right"></div> <!-- 将 左右 列 放 在 前 面 --> 


<div id="main"></div> 


以 上 4 种 方法 ,第 1 种 只 能 实现 3 列 固定 宽度 布局 或 等 比例 可 变 宽 布局 ,而 其 余 3 种 
方法 都 能 实现 两 侧 列 固定 、 中 间 列 变 宽 的 布局 。 


5.5.4 1-2-1 可 变 宽度 布局 


随 着 显示 屏 的 变 大 ,可 变 宽度 布局 目前 正在 变 得 流行 起 来 , 它 比 固定 宽度 布局 有 更 高 
的 技术 含量 。 本 节 介绍 两 种 最 常用 的 可 变 宽度 布局 模式 , 即 : 两 列 (或 多 列 ) 等 比例 布局 、 
一 列 固定 .一 列 变 宽 的 1-2-1 式 布局 。 

1. 两 列 (或 多 列 ) 等 比例 布局 

两 列 ( 或 多 列 ) 等 比例 布局 的 实现 方法 很 简单 ,将 固定 宽度 布局 中 每 列 的 宽 由 固定 的 
值 改 为 百分比 就 行 了 。 代 码 (5-38. html) 如 下 。 


#header, #pagefooter, #container{ /x*min-width: 490px; 防止 网 页 过 罕 * / 
margin:0 auto; width:85%; /* 将 固定 宽度 改 为 比例 宽度 * / 1 
#content{ 
float:right; width:66%; /* 改 为 比例 宽度 x*/ 1} 
#side{ 
float:left; width:33%; /x* 改 为 比例 宽度 x*/ 1} 


这 样 不 论 浏览 器 窗口 的 宽度 怎样 变化 ,两 列 的 宽度 总 是 等 比例 的 。 如 图 5-48 (a)、 
图 5-48(b) 所 示 。 但 是 当 浏览 器 变 得 很 窄 之 后 ,如 图 5-48(c) 所 示 , 网 页 会 变 得 很 难看 。 
如 果 不 希 望 这 样 , 可 以 对 # container 添加 一 条 “min-width: 490px;” 属 性 , 即 网 页 的 最 小 
宽度 是 490px, 这 样 当 浏览 器 的 宽度 小 于 490px 后 ,网 页 就 不 会 再 变 小 了 ,而 是 在 浏览 器 
的 下 方 出 现 水 平 滚动 条 。 





1-2-1 布局 等 比例 赤 度 -gorilla FirefEoz 


| 文件 中 轴 本 四 查看 轴 历史 G) 书生 因 I 具 D 到 总 









Page Content 2 
和 很 不 巧 ， 火 车 来 了 (而 且 理所当然 的 往 上 面 有 很 多 
和 小孩 的 ， 仍 在 使 用 的 铁轨 上 行驶 》 而 你 正 站 在 铁 
轨 的 切换 器 私 ， 因 此 你 能 让 火车 转 往 停 用 的 铁轨 


这 样 的 话 你 就 可 以 救 了 大 多 数 的 小 朋友 ; 但 是 那 
名 在 停 用 铁轨 上 的 小 朋友 将 被 轻 性 你 会 怎么 办 ? - 


(a) 浏览 器 比较 宽 时 
5-48 等 比例 变 宽 布局 时 在 浏览 器 窗口 变化 时 的 不 同 效果 
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很 不 巧 ， 火 车 来 了 (而 且 理所当然 的 性 
， 仍 在 使 用 的 铁轨 


旁 ， 因 此 你 能 让 火车 转 往 停 用 的 铁轨 
这 样 的 话 你 就 可 以 救 了 大 多 数 的 小 朋 


| | 
(b) 浏览 器 变 窜 后 (0) 浏览 器 变 得 很 窗 之 后 


图 5-48 ( 续 ) 





提示 : 在 CSS 中 ,min-height、min-width、max-height、max-width 这 4 个 属性 分 别 用 
于 设置 最 小 .最 大 高 度 和 宽度 。 在 可 变 宽度 布局 时 ,有 时 要 控制 页 面 的 最 小 宽度 ,因此 
min-width 属性 经 常 使 用 。 又 如 在 新 闻 内 容 页 面 中 ,有 些 新 闻 很 短 ,此 时 可 设置 min- 
height 属性 ,保证 内 容 很 短 时 网 页 的 高 度 也 不 会 过 小 。 


2. 单列 变 宽 布局 


一 列 固定 ,一 列 变 宽 的 1-2-1 式 布局 是 一 种 在 博客 类 网 站 中 很 受 欢 迎 的 布局 形式 ,如 
图 5-49 所 示 。 这 类 网 站 常 把 侧 边 的 导航 栏 宽度 固定 ,而 主体 的 内 容 栏 宽度 是 可 变 的 。 


1-?-! 机 局 活 应 写 度 -Wori11a irate 
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很 下 5， 火车 来 了 0 有理 
匠 当 关 的 往 上 面 有 很多 小 于 的 ， 
切 在 使用 的 铁 负 上 行 驻 ) 而 你 
正 站 在 铁 负 的 切换 器 其 ， 因 此 你 折 宪 使用。 
袖 让 火车 转 往 入 用 的 铁轨 的 铁 委 上 玩 | 司 


5-49 一 列 固定 ,一 列 变 宽 布局 (右边 这 一 列 宽度 是 固定 的 ) 


例如 网 页 的 宽度 是 浏览 器 宽度 的 85% ,其 中 一 列 的 宽度 是 固定 值 200px。 如 果 用 表 
格 实现 这 种 布局 ,只 需 把 布局 表格 的 宽度 设 为 85%% ,把 其 中 一 列 的 宽度 设 为 固定 值 就 可 
以 了 。 但 用 CSS 实现 一 列 固定 、 一 列 变 宽 的 布局 ,就 要 麻烦 一 些 。 首 先 ,把 一 列 div 的 宽 
度 设置 为 200px, 那 么 另 一 列 的 宽 就 是 (包含 整个 网 页 container 宽 的 “100%% 一 200px”) ， 
而 这 个 宽度 不 能 直接 写 , 因 此 必须 设置 另 一 列 的 宽 是 100% ,这 样 另 一 列 就 和 container 
等 宽 , 这 时 会 占 满 整 个 网 页 ,再 把 这 一 列 通过 负 边 界 margin-left: 一 200px 向 左 偏 移 
200px, 使 它 的 右边 留 出 200px, 正 好 放置 side 列 。 最 后 设置 这 一 列 的 左 填充 为 200px, 这 
样 它 的 内 容 就 不 会 显示 到 网 页 的 外 边 去 。 代 码 (5-39. html) 如 下 ,图 5-50 是 该 布局 方法 
的 示意 图 。 


| 宙 不 配 ， 火 年 米 了 (而且 理 所 当 拓 的 在 上 加 有 
;很多 小 孩 的 ， 仍 在 使 用 的 铁轨 上 行 怠 ) 而 你 正 站 
“在 铁 妆 的 切 痪 锋 务 ， 因 此 伯 能 让 淡 车 转 往往 用 的 
;铁轨 
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图 5-50 单列 变 宽 布局 


5.5.5 CSS 两 列 布局 案例 

CSS 布局 本 质 上 就 是 设计 盒子 在 页 面 上 如 何 排列 ,本 节 将 制作 如 图 5-51 所 示 的 网 
页 ,图 5-52 是 该 网 页 的 CSS 布局 示意 图 ,该 网 页 的 制作 步骤 如 下 。 

1. 制作 网 页 的 头 部 


(1) 将 网 页 划分 为 两 部 分 . 即 上 方 的 header 部 分 和 主体 的 container 部 分 ,如 图 5-52 
所 示 , 观 察 header 部 分 有 两 个 背景 色 ( 绿 色 和 白色 ) 和 一 个 背景 图 像 ,而 一 个 元 素 的 盒子 
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公司 简介 










革 冬 佳 阳 太 阳 能 有 限 公司 成 立 于 2005 年 11 月 18 日 ， 地 处 西安 经济 技术 开发 区 ， 是 册 旺 太阳 能 及 新 杜 新 能 涯 股份 有 限 
公司 两 家 股东 控 强 强 蕊 ?的 经 营 机 制 投 中 国 最 大 的 专业 从 事 太阳 能 等 新 能 源 的 开发 、 利 用 的 高 新 技术 企业 
之 一 。 下 足 佳 阳 致力 于 提供 和 发 展 高 同和 并 同 太阳 能 系统 ， 著 有 专业 的 腔 陶 生产、 研发、 销售 和 项 目 工程 队 佰 ， 为 
悠 融 来 量 身 定做 的 太阳能 产品 和 枯 大 服务 。 

我 们 吾 力 于 制造 
护 遍 同 及 并 同 太阳能 系统 。 主 要 应 

一 加 肖 讯 鲁 城 、 铁 路 各 外 
斌 、 几 乎 免 于 维护 的 太阳 能 电源 。 

一 为 俩 运 无 电 地 区 的 村 落 和 家 许 提 供 基本 申明 、 医 
疗 、 数 育 所 须 电 力 。 

一 为 城市 建筑 提供 并 网 电力 。 
与 全 项 、 天 窗 、 项 培 、 加 阳 板 、 丙 壬 
等 建筑 结构 欧美 结合 ， 创 进出 建筑 美学 和 琵 源 供应 相 结 合 的 太阳 能 光伏 妇 筑 ( ETPY) 。 

* “中国 移 动 西 曾 环 、 联 通 东 北 基 丰 、 恬 通通 从 站 、 新 疆 神田 通信 站 , 广东 激 波 ,广东 电信 遂 信 站 等 项 目 。 
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图 5-51 网 页 效果 图 


pany Linited All Riehts E 





#content 


#intro 


5-52 太阳 能 网 站 CSS 布局 示意 图 
最 多 只 能 设置 一 种 背景 色 和 一 个 背景 图 像 (为 了 兼容 TE8, 本 实例 不 使 用 CSS3 的 有 关 必 





性 ) ,因此 需要 插入 两 个 盒子 来 实现 。 代 码 (5-40. html) 如 下 : 


<div id= "header"><hl> 光 普 太 阳 能 网 站 < /hl>< /div> 
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(2) 设置 #header 的 背景 色 为 绿色 , 宽 为 852px( 该 网 页 的 宽 


二 


#header{ 
background- color:#99cc00; 
width:852px; } 


(3) 设置 hl 的 背景 色 为 白色 ,并 设置 背景 图 像 为 logo. jpg, 通 过 设置 margin 使 盒子 
向 右 偏 移 161px, 然 后 用 text-indent 属性 隐藏 标记 中 的 文字 。 这 样 网 页 的 头 部 就 做 好 了 。 


#header hl { 
text- indent: -9999px7 /* 隐藏 hl 中 的 文本 * / 
width: 691px; height: 104px; 
background: #fff url(images/1ogo.jpg) no- repeat 64px 07 
/* logo 左 侧 有 64px 空白 */ 
margin: 0 0 0 161px; /* 向 右 移 动 16lpx*/ } 


提示 : 将 标题 中 的 文字 进行 图 像 替 换 的 主要 目的 就 是 在 HTML 代码 中 仍然 保留 hl 


元 素 中 的 文字 信息 ,这 样 对 于 网 页 的 维护 和 结构 完整 都 有 很 大 好 处 ,同时 对 搜索 引擎 的 优 
化 也 有 很 大 的 意义 ,因为 搜索 引擎 对 hl 标题 中 的 文字 信息 相当 重视 。 


2. 网 页 主体 部 分 的 分 栏 


(1) 页 面 主 体 部 分 可 分 为 #nav 和 车 content 两 栏 , 只 要 对 这 两 栏 均 设置 浮动 ,它们 就 
会 并 排 排列 ,但 问题 是 两 栏 可 能 不 等 高 ,这 需要 用 其 他 办 法 让 它们 看 起 来 等 高 。 本 例 的 解 
决 办 法 是 在 两 栏 外 添加 一 个 容器 # container, 结 构 代码 如 下 : 


<div id="container"> <!-- 主 体 部 分 容器 --> 
<div id="nav">* </div> < 左 放 在 > 
<div id="content">… </div> <!-- 右 侧 栏 --> 
</div> 


(2) 设置 整个 容器 # container 的 背景 色 为 绿色 ,设置 右 侧 栏 并 content 的 背景 色 为 白 
色 ,这样 # content 的 白色 覆盖 在 # container 的 右边 , # container 的 左 侧 栏 就 是 绿色 了 ， 
看 起 来 左右 两 列 就 等 高 了 。 另 外 设置 # content 右边 框 为 1px 实 线 , 作 为 网 页 的 右边 框 。 
#container { 
background- color:#9c0; width:852px; } 
#container #content { 


width:690px; background- color: white; float:left; 
border- right: lpx solid #daeda3; } /* 网 页 主体 部 分 的 右边 框 * / 


3. 制作 左 侧 列 导航 块 
(1) 设置 左 侧 列 中 的 导航 块 样式 。 由 于 在 网 页 效果 图 中 导航 块 宽度 是 161px, 而 里 
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面 导航 项 的 宽度 是 143px, 所 以 我 们 可 以 设置 导航 块 并 nav 的 width 为 152px, 左 填充 为 
9px, 这 样 #mnarv 的 宽度 就 有 161px, 而 它 里 面 的 导航 项 左右 也 正好 有 9px 的 宽度 ,实现 水 
平 居中 。 


#container #nav { 
float:left; 
width:152px; height:166px; 
background- color:#00801b; 
padding:15px 0 0 9px;} 


(2) 在 #nav 块 中 添加 6 个 a 元 素 作为 导航 项 ,HTML 代码 如 下 : 


<div id="nav"> 
<a href="#"> 首 页 </a><a href="#"> 关 于 我 们 < /a> 
“…<a href="#"> 联 系 我 们 </a> </div> 


(3) 然后 设置 这 些 导 航 项 的 样式 ,其 中 导航 项 的 背景 图 如 图 5-53 所 示 , 设 置 导 航 项 
在 默认 状态 下 显示 该 背景 图 的 上 部 ,鼠标 指针 滑 过 时 显示 下 部 即 实现 了 背景 翻转 效果 。 


#nava { 
display:block; 
width:113px; height:18px; 
background:url (images/dh.jpg) no- repeat; 
padding:5px 0 0 30px; 
color:white; text- decoration:none; 
font:12px/1.1 "黑体 "; } 
#nav a:hover { 
color:#00801b; background- position:0 -23px; } 


图 5-53 a 元 素 导 航 项 的 背景 图 


提示 : 如 果 要 将 图 像 作为 HTML 元 素 的 背景 显示 在 网 页 中 ,只 需 设置 元 素 的 宽 和 高 
等 于 图 像 的 宽 和 高 即 可 ,但 如 果 对 元 素 还 设置 了 填充 值 ,就 必须 将 元 素 的 宽 和 高 减 去 填充 
值 。 例 如 ,a 元 素 的 背景 图 尺寸 是 143pxX23px, 但 由 于 设置 了 填充 值 ,因此 对 a 元 素 的 宽 
和 高 设置 为 113px 和 18px。 
(4) 但 是 当 # container 里 的 两 列 都 浮动 后 ,它们 都 脱离 了 标准 流 , 此 时 # container 
会 容纳 它们 ,必须 在 它 里 面 放置 一 个 清除 浮动 的 元 素 用 来 扩展 井 container 的 高 度 , 代 
码 如 下 。 当 然 , 也 可 以 设置 #container 元 素 (overflow :auto) 来 清除 浮动 的 影响 。 


#container:after { content: ''; display: table; clear: both; } 
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4. 制作 右 侧 主要 内 容 栏 


(1) 接 下 来 设置 页 面 主体 的 内 容 部 分 # content, 可 发 现 #content 盒子 里 包含 3 个 子 
盒子 ,分 别 用 来 放置 上 方 的 banner 图片. 中 间 的 公司 简介 栏目 和 底部 的 版 权 信息 ,因此 在 
元 素 # content 中 插入 3 个 子 div 元 素 。 代 码 如 下 : 


<div id="content"> 
<div id="banner"></div> 
<div id="intro"n>… </div> 
<div id="copyright"> </div> 
</div> 


(2) 设置 # banner 盒子 的 宽 和 高 正好 等 于 banner 图 片 (bal. jpg) 的 宽 和 高 ,再 设置 
# banner 的 背景 图 是 banner 图 片 就 完成 了 banner 区 域 的 样式 设置 。 代 码 如 下 : 


#content #banner { 
background: url (images/bal.jpg) no- repeat; 
width:688px; height:181px; /* 宽 和 高 正好 等 于 bal.jpg 的 大 小 * /} 


(3) 设置 公司 简介 栏目 #intro, 可 发 现 公 司 简介 栏目 由 标题 和 内 容 两 部 分 组 成 ,因此 
在 其 中 插入 两 个 div。 由 于 标题 # title 部 分 有 两 个 背景 图 像 ,需要 两 个 盒子 ,所 以 在 
#title 里 面 再 添加 一 个 h2 元 素 。 代 码 如 下 : 
<div id="intro"> 
<div id="title"><h2> 公 司 简介 </h2>< /div> 
<div id= "intr"> 光 普 太 阳 能 成 立 于 …< img src="images/in.jpg"/>…</div> 
</div> 


(4) 接 下 来 设置 #title 的 样式 ,由 于 #title 上 方 和 左边 需要 留 一 些 空隙 ,因此 设置 其 
margin 属性 和 width 属性 使 其 水 平 居 中 ,设置 其 背景 图 像 为 一 张 小 背 景 图 像 横向 平 铺 。 


#intro #title { /* 公司 简介 栏目 标题 * / 
width:90%; 
margin:16px 0 0 5%; /* 设 置 上 边界 和 左边 界 , 实 现 水 平 居中 x / 


background:url (images/bj.jpg) repeat— x; /* 背景 图 横向 平 铺 * /} 


(5) 再 对 h2 设置 背景 图 像 ,因为 需要 对 h2 元 素 进行 图 像 替 代 文 本 ,设置 h2 的 高 度 
把 #title 盒子 撑 开 ,再 设置 margin 为 0 消除 h2 的 默认 外 边 距 。 隐 藏 元 素 中 文本 的 常用 
方法 是 设置 text-indent: 一 9999px, 这 样 就 把 文本 移 到 了 窗口 之 外 而 不 可 见 。 


#intro #title h2 { 


text- indent:- 9999px; /* 隐藏 h2 的 文本 * / 
background:url (images/ggd.jpg) no- repeat; /x 用 图 像 蔡 代 文 本 * / 
height:41lpx; margin:0; 3 
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(6) 设置 公司 简介 栏目 文本 的 样式 ,主要 是 设置 边界 .字体 大 小 ` 行 高 .字体 颜色 等 。 


#content #intro #intr { 
width:90%; 
margin:21px 0 0 5%; /#* 设置 上 边界 和 左边 界 ,实现 水 平 居中 * / 
font- size: 9pt; line-height: 18pt; color: #999; } 


再 设置 文本 区 域 中 的 客服 人 员 图 片 右 浮动 ,实现 图 文 混 排 。 





#intro #intr img { /* 文 本 里 的 客服 人 员 图 像 * / 
float:right; /* 右 浮动 ,实现 图 文 混 排 * / 
width:300px; height:200pxy } /* 宽 和 高 正好 等 于 in.jpg 的 大 小 */ 


(7) 设置 网 页 底部 版 权 部 分 样式 ,包括 用 上 边框 制作 一 条 水 平 线 和 设置 文本 样式 。 


#content #copyright { 
font- size: 9pt; color: #999; text-align:center; 
width:90%; margin:8px 0 0 5%; padding:8px; 
border-top:lpx solid #ccc; } /* 版 权 信息 上 方 的 水 平 线 * / 


总 结 : 在 CSS 布局 中 ， 

(1) 为 了 定义 每 个 盒子 在 网 页 中 的 精确 大 小 ,几乎 每 个 元 素 的 盒子 都 设置 了 width 
和 height 属性 ,只 是 有 些 父 元 素 将 被 子 元 素 撑 开 ,所 以 父 元 素 的 这 些 属 性 有 时 可 以 省 略 。 

(2) 为 了 让 元 素 的 盒子 在 网 页 中 精确 定位 ,一般 可 通过 元 素 自身 的 margin 或 父 元 素 
的 padding 属性 使 盒子 精确 移动 到 某 个 位 置 , 像 # header 中 的 hl 元 素 就 是 通过 margin 
属性 移动 到 了 右 侧 。 


5.5.6 HTMLS 新 增 的 文档 结构 标记 


在 CSS 布局 中 ,通常 给 网 页 的 每 个 区 域 的 div 都 设置 一 个 id 属性 ,属性 值 一 般 是 
header ,footer .nav,sidebar 等 。 例 如 ,下 面 是 一 个 1-2-1 布局 网 页 的 结构 代码 : 


<body> 
<div id="header"> 页 头 </div> 
<div id="nav"> 导 航 </div> 
<div id="container"> 
<div id="sidebar"> 左 侧 栏 < /div> 
<div id="main"> 主 栏 </div> 
</div> 
<div id="footer"> 底 部 说 明 < /div> 
</body> 


尽管 上 述 代 码 不 存在 任何 错误 ,还 可 以 在 HTML5 环境 中 很 好 地 运行 ,但 该 页 面 结 
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构 对 于 浏览 器 来 说 都 是 未 知 的 ,因为 元 素 的 id 值 允许 开发 者 自己 定义 ,只 要 开发 者 不 同 ， 
那么 元 素 的 id 值 就 可 能 各 异 。 

为 了 让 浏览 器 更 好 地 理解 页 面 结构 ,HTML5 中 新 增 了 一 些 页 面 结构 标记 。 这 些 新 
标记 可 明确 地 标明 页 面 元 素 的 含义 ,如 头 部 二 header 二 .导航 二 nav 二 、 脚 部 二 footer 二 、 分 
区 一 section> .文章 article 之 等 。 将 上 述 代码 修改 成 HTML5 支持 的 页 面 代码 (5-41 
.html) ,如 下 所 示 。 





<body> 
<header> 页 头 </header> 
<nav> 导 航 < /nav> 
<section> 
<aside> 左 侧 栏 < /aside> 
<article> 主 栏 </article> 
</section> 
<footer> 底 部 说 明 < /footer> 
</body> 


这 样 就 可 直接 对 上 述 结构 标记 设置 CSS 样式 ,代码 如 下 ,在 支持 HTML5 的 浏览 器 
中 显示 效果 如 图 5-54 所 示 。 


header, nav, section,article,aside, footer{ 

border:solid lpx #666; padding:10px; margin:4px auto;} 
section{padding:4px 0;} 
header,nav ,footer{ width:400px } 
section{width:420px;margin:6px auto;} 
aside {float:left; width:60px; height:100px; 

margin:4px 4px 4px 0;} 
article{float:left; width:312px; height:100px;} 
section:after { content: ''; display: table; clear: both;} 


/x* 清除 两 列 浮动 的 影响 * / 


站 mL5 布 局 代码 





CDD:yhtnl5buju htnl 





页 头 








导航 
































底部 说 明 











图 5-54 HTML5 标记 布局 的 网 页 
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CSS 布局 


可 见 , 在 HTML5 中 ,使 用 CSS 布局 已 经 不 再 需要 div 了 ;也 不 再 需要 自己 设置 布局 
元 素 的 ID 属性 ,从 标准 的 元 素 名 就 可 以 推断 出 各 个 部 分 的 意义 。 这 对 于 盲人 浏览 器 . 手 
机 浏览 器 和 其 他 非 标准 浏览 器 尤其 重要 。 

其 中 ,article 元 素 还 可 用 来 创建 栏目 框 ,在 article 元 素 中 可 以 有 自己 的 独立 元 素 , 如 
二 header 记 或 二 footer 等 二 ,示例 如 下 。 这 样 不 仅 使 内 容 区 域 各 自分 段 、 便 于 维护 ,而 且 
代码 简单 ,局 部 修改 也 更 方便 。 





<article> 
<header> 
<h3> HTML5< /h3> 
</header> 
<p> HTML5 是 下 一 代 HTML 的 标准 ,目前 仍然 处 于 发 展 阶段 。 经 过 了 Web2.0 时代, 基于 互联 网 的 
应 用 已 经 越 来 越 丰 富 ,同时 也 对 互联 网 应 用 提出 了 更 高 的 要 求 。< /p> 
<footer><p> 发 表 于 2014.10.18< /p></footer> 
</article> 


提示 : 由 于 IE8 以 下 浏览 器 不 支持 HTML5 标记 ,因此 上 述 用 HTML5 标记 布局 的 
网 页 在 IE8 中 无 法 正常 显示 ,解决 该 问题 的 办 法 是 在 网 页 头 部 插入 如 下 代码 ,该 代码 表 
示 , 如 果 浏 览 器 版 本 低 于 IE9, 则 引入 html5shiv. js 文件 (使 IE8 支持 HTML5 的 文件 ) 。 


l= 
<script src="js/html5shiv.js"></script> 
<![endif]--> 


5.5.7 HTMLS 网 页 布局 案例 


如 图 5-55 所 示 的 是 本 节 网 页 布局 案例 的 效果 图 ,该 网 页 的 头 部 .导航 banner 和 底 前 
区 域 均 为 通栏 设计 ( 即 宽度 为 100%% , 占 满 浏览 器 的 全 部 宽度 ) ,而 中 间 的 主体 部 分 为 固定 
宽度 (宽度 为 1170px)。 网 页 主体 部 分 采用 分 两 列 的 结构 ,同一 列 中 的 栏目 框 样式 相同 
(如 左 侧 栏 中 的 栏目 框 的 头 部 及 边框 都 是 相同 的 ) ,不 同 列 中 的 栏目 框 样式 不 同 。 这 符合 
平面 设计 理论 中 变化 与 统一 的 规律 。 统 一 彰显 和 谐 与 秩序 ,而 变化 则 能 带 来 活力 ,避免 单 
调和 乏味 。 

该 网 页 的 布局 结构 如 图 5-56 所 示 ,HTML 结构 代码 (5-42. htm]) 如 下 : 


<header> <!-- 头 部 --> 
<div class= "headbox">…</div> 

</header> 

<nav><div class="navbox">*"</div>< /nav> <!-- 导 航 --> 

<section class= "banner"></section> <I==banner==> 

<section class="content"> <!-- 页 面 主 体 --> 
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图 5-55 ”网 页 效果 图 










<header> 





<nav> 


<section class="banner"> 


<article> 











] | [ ] 


<section class="content"> 































<footer> 


图 5-56 网 页 布局 结构 图 
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<aside> 左 侧 栏 </aside> 
<article> 主 栏 </article> 
</section> 
<footer><div class="footerbox"> 底 部 </div></footer> 





注意 到 网 页 头 部 导航、 底部 都 采用 了 两 个 盒子 嵌 套 来 实现 ,其 中 外 层 盒子 宽度 为 
100% ,用 来 撑 满 浏览 器 ,内 层 盒子 宽度 为 固定 像素 ,并 且 居中 。 这 样 可 以 使 固定 宽度 的 网 
页 看 起 来 有 点 像 自 适应 宽度 网 页 一 样 。 








1. 网 页 布局 元 素 的 样式 设计 
其 中 头 部 区 域 的 布局 代码 如 下 , 头 部 的 内 容 位 于 居中 的 headbox 元 素 区 域 中 : 





header {width: 100%; background- color: #fff;} 
.headbox {width: 1170px; height: 102px; margin: 0 auto; position: relative;} 


导航 区 域 采 用 一 张 背 景 图 片 , 然 后 对 navbox 设置 固定 宽度 和 高 度 , 并 居中 。 


nav{background: #0884d5 url (navbg.png)no- repeat center center; width: 100%;} 
-navbox { width: 1170px; height: 50px; margin: 0 auto;} 


banner 区 域 主要 是 设置 图 片 居中 平 铺 , 这 样 , 当 屏幕 较 窗 时 ,大 图 两 边 自动 隐藏 。 


.banner {width: 100%; height: 207px; 
background: url (images/banner cg.jpg) no- repeat center top;} 


页 面 主体 部 分 采用 两 列 浮动 法 将 主体 分 为 两 列 。 对 两 列 的 容器 content 采取 
overflow 方法 清除 浮动 。 代 码 如 下 : 
.Content {width: 1170px; box- sizing:border-box; background- color: #FFF; 
overflow: hidden; padding: 22px 15px 18px; margin: 0 auto;} 


.content aside {width: 274px; margin- right: 18px; float: left; } /* 左 侧 栏 x / 
.content article {width: 848px; float: left; } /* 右 侧 栏 * / 


页 面 底部 主要 是 设置 宽 和 高 以 及 背景 图 片 ,并 设置 填充 等 。 


footer {width: 100%; height: 79px; 
background: url (images/footerbg.png) repeat-x 0 0;} 
.footerbox { 
width: 1052px; height: 49px; margin: 0 auto; padding- top: 18px;} 


2. 侧 栏 栏目 框 的 制作 
每 个 栏目 框 从 结构 上 看 都 包括 标题 栏 和 内 容 区 两 部 分 ,标题 栏 采用 h3 元 素描 述 ,内 
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容 区 域 是 类 名 为 currlum 的 div 元 素 。 然 后 在 标题 栏 和 内 容 区 域外 包 右 一 个 div 元 素 ,使 
其 整合 成 一 个 栏目 框 ,因此 , 左 侧 栏 每 个 空 栏 目 框 的 结构 代码 如 下 : 


<div class="bk currbox"> 


<h3 class="currtit1"> 实 验 平 台 </h3> <!-- 标 题 栏 --> 
<div class="currlum"> …</div> <!-- 内 容 区 --> 
</div> 


然后 再 对 栏目 框 设 置 边框 ,对 栏目 标题 设置 背景 图 片 . 行 高 等 ,CSS 代码 如 下 : 


.currbox { width: 274px; border: lpx solid #dddcdc; } /* 栏 目 边框 */ 
.Ovetitl, .pertitl, .currtitl { 
line-height: 34px; overflow: hidden; padding- left: 24px; 
color: #077bc5; font- size: 16px; 
background: url (images/titlbg.png) no- repeat 0 0;} 


在 左 侧 栏 第 2 个 栏目 中 ,有 3 个 按钮 图 标 , 当 鼠标 指针 滑 和 人 时 ,其 背景 图 像 会 发 生 改 
变 , 这 是 通过 背景 图 像 的 翻转 实现 的 。 其 代码 如 下 : 


.zhinan li a{width:231lpx;height:52px;line- height:52px; vertical-align:middle; 
background:url (images/zn bg.png)no- repeat 0 0;display:block;position:relative; 
margin:12px Opx Opx 23px;color:#0876cl;font- size:16px;padding- left:70px; } 
.Zhinan li a:hover{background- position:0 bottom;} /* 背景 图 翻转 * / 
.zhinan li a img{position:absolute;left:17px;top:9px;} /* 相对 于 a 元 素 定位 */ 
.zhinan li a span{padding- top:7px;display:block;} 
<div class="currlum"> 
<ul class="zhinan"> 

<1li><a href="#"><img src="images/zn01.png"> 平 台 应 用 指南 </a></1i> 

<1li><a href="#"><img src="images/zn02.png"> 联 系 我 们 </a></1i> 

<1i><a href="#" style="line-height:18px;"><img src="images/zn03.png"> 

<span> 手 机 端 二 维 码 <br> 及 应 用 指南 </span></a></1li></ul></div> 


3. 主 栏 图 片 滚动 框 的 制作 
对 于 图 5-55 中 主 栏 下 方 的 图 片 滚动 框 ,可 以 将 它 看 成 是 一 个 无 序列 表 , 在 每 个 1 元 

素 中 放 一 张 图 片 , 再 设置 li 元 素 浮动 ,使 所 有 图 片 水 平 排列 。 另 外 ,必须 对 无 序列 表 的 父 

元 素 设 置 溢出 隐藏 ,具体 实现 步骤 请 看 8. 5. 7 节 中 “图 片 滚动 栏 ”部 分 的 内 容 。 

5.6 CSS3 新 增 的 布局 方式 

5.6.1 弹性 盒 布局 


使 用 经 典 的 CSS 布局 方法 对 网 页 布局 通常 需要 使 用 float margin、 position 等 属性 去 
创建 复杂 的 页 面 结 构 代 码 。 为 了 使 CSS 布局 变 得 更 加 简单 和 方便 ,CSS3 新 增 了 弹性 盒 
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布局 方式 。 
1. 开启 弹性 盒 布局 


下 面 的 代码 通过 开启 弹性 盒 布 局 ,能 使 弹性 盒 中 的 div 元 素 水 平 排列 ,代码 (5-43 
.html) 如 下 ,效果 如 图 5-57 所 示 。 


.flex{ 
display: flex; /* 开启 弹性 盒 布 局 ,该 元 素 成 为 弹性 容器 * / 
flex- flow: row; /* 盒子 内 的 元 素 按 横 轴 方向 排列 * / 
background- color:#ffff99; border:1px solid #111; } 

div{ 


padding:10px; margin:10px; 

border:1px dashed #111; background- color:#90baff; } 
<div class="flex"> 

<div class="sonl">Box- 1</div> 

<div class="son2">Box- 2< /div> 

<div class="son3">Box- 3</div> 
</div> 














图 5-57 ”弹性 盒 布局 示例 


该 实例 主要 利用 了 以 下 几 个 CSS 属性 。 

(1) display: flex 表示 开启 弹性 盒 布 局 模式 。 这 样 元 素 就 成 为 一 个 弹性 容器 ,该 元 素 
的 所 有 直接 子 元 素 都 会 遵循 弹性 盒 布 局 的 规则 来 排列 。 其 中 ,flex 是 display 属性 在 
CSS3 中 新 增 的 一 个 属性 值 ,如 果 要 对 属性 值 添加 浏览 器 前 组 ,应 写成 : display:-webkit- 
flex。 

(2) flex-flow: row 表示 弹性 盒 中 的 直接 子 元 素 按 水 平方 向 排列 。 由 于 row 是 该 属 
性 的 默认 值 ,因此 该 语句 也 可 省 略 ,也 就 是 说 ,弹性 盒 布局 中 子 元 素 默认 都 是 水 平 排列 的 。 

flex-flow 可 接 两 个 属性 ,语法 为 : flex-flow: row | column nowrap | wrap | wrap- 
reverse, 第 2 个 属性 表示 子 元 素 溢出 父 元 素 时 , 子 元 素 是 换行 显示 (wrap) 还 是 缩小 宽度 
而 不 换行 (nowrap, 默 认 值 ) ,例如 flex-flow: row nowrap。 

总 结 : 弹性 盒 布局 的 特点 有 : 

(1) 弹性 盒 中 的 所 有 直接 子 元 素 默 认 都 是 水 平 排列 ; 

(2) 所 有 直接 子 元 素 的 高 度 默认 会 自动 伸展 ; 

(3) 如 果 所 有 直接 子 元 素 宽度 的 和 超过 父 元 素 , 则 默认 情况 下 子 元 素 的 宽度 会 自动 
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收缩 以 适应 父 元 素 的 宽 。 
2. 设置 子 元 素 的 对 齐 方式 
下 面 再 在 . flex 选择 器 中 添加 如 下 两 条 属性 , 则 显示 效果 如 图 5-58 所 示 。 


-flex{ 
justify- content: center; /* 设置 盒子 内 元 素 向 轴 中 间 对 齐 * / 
align- items: center; } /* 盒子 内 元 素 向 垂直 于 轴 的 方向 上 的 中 间 位 置 对 齐 * / 














图 5-58 水 平和 垂直 居中 对 齐 


这 两 条 属性 的 含义 如 下 : 

(1) justify-content 一 一 设置 弹性 盒 内 的 子 元 素 在 主轴 (默认 是 横 轴 ,可 由 flex-flow 
属性 设置 ) 上 的 对 齐 方式 ,其 取 值 有 flex-start | flex-end | center | space-between | 
space-around。 其 中 后 两 个 值 将 使 盒子 内 元 素 在 横 轴 上 两 端 对 齐 排列 ,但 盒子 之 间 的 间 
距 会 有 不 同 。 

(2) align-items 设置 弹性 盒 内 的 子 元 素 在 侧 轴 ( 默 认 是 纵 轴 )? 上 的 对 章 方式 ,其 取 
值 有 flex-start | flex-end | center | baseline | stretch。 默 认 值 为 stretch ,表示 盒子 内 元 
素 高 度 ( 或 宽度 ) 将 自动 伸展 。 


3. 设置 子 元 素 的 排列 顺序 和 占据 的 比例 
在 上 述 代码 的 基础 上 分 别 对 3 个 子 元 素 设 置 如 下 CSS 属性 , 则 效果 如 图 5-59 所 示 。 





.sonl{flex:1; order:3} /* 占据 弹性 盒 1/5 的 宽度 ,排序 位 置 为 3* / 
.son2{flex:3; order:2} 
.Son3{flex:1; order:1} 


5-59 设置 子 元 素 的 排列 顺序 和 占据 的 比例 











可 见 ,flex 用 于 设置 子 元 素 占据 弹性 盒 的 宽度 ,其 取 值 既 可 以 是 数字 ,表示 占据 的 份 
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额 ;也 可 以 是 像素 ,表示 占据 的 实际 宽度 。order 用 于 设置 子 元 素 的 排列 顺序 。 
4. 使 用 弹性 盒 模型 进行 1-3-1 版 式 布局 实例 


下 面 是 一 个 使 用 弹性 盒 模型 进行 网 页 版 式 布 局 的 示例 代码 (5-44. html) ,其 在 客户 端 
的 运行 效果 如 图 5-60 所 示 , 当 浏览 器 宽度 小 于 640px 时 ,弹性 盒 中 的 子 元 素 会 纵向 排列 。 





CSS 代码 如 下 : 





在 弹性 盒 布 局 中 ,要 注意 以 下 几 点 : 
(1) 弹性 容器 中 的 每 一 个 直接 子 元 素 都 会 变 成 弹性 子 元 素 , 弹 性 容器 中 直接 包含 的 


无 标记 环绕 的 文本 也 会 变 为 匿名 弹性 子 元 素 。 
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header 元 率 


footer 元 素 


图 5-60 ”弹性 盒 布局 示例 图 
(2) float 和 clear 属性 对 弹性 子 元 素 无 效 , vertical-align 属性 对 弹性 子 元 素 对 齐 
无 效 。 
(3) 分 栏 布局 中 的 column- * 属性 对 弹性 子 元 素 无 效 。 


5.6.2 分 栏 布局 


在 报纸 或 杂志 上 ,已 经 普遍 使 用 分 栏 布局 让 内 容 流 动 起 来 ,这 种 布局 解决 了 长 文本 行 
的 阅读 问题 。 在 过 去 ,网 页 要 实现 分 栏 布局 ,只 能 使 用 多 个 元 素 并 让 这 些 元 素 浮动 起 来 ， 
但 这 无 法 实现 一 篇 长 文章 在 栏 与 栏 之 间 自 动 续 排 。 为 此 ,CSS3 提供 了 分 栏 布局 功能 ,网 
页 也 可 以 方便 地 使 用 分 栏 布局 并 使 内 容 自 动 续 排 了 。 


1. 分 栏 布局 的 方法 


把 元 素 中 的 内 容 均等 划分 为 几 列 的 第 1 种 方法 是 使 用 column-count 属性 ,例如 ,下 
面 的 声明 将 把 div 元 素 的 内 容 划分 为 3 栏 。 


div.col {-webkit- column-count: 3;} 


把 元 素 中 内 容 划 分 成 多 列 的 第 2 种 方法 是 使 用 column-width 属性 ,例如 : 


div.col { -webkit-column-width: 300px; } 


这 种 方式 适合 于 可 变 宽 度 的 网 页 布局 ,即使 网 页 宽度 发 生变 化 ,每 列 的 宽度 依然 能 保 
持 不 变 。 也 许 有 人 会 问 ,如 果 容 器 的 宽度 不 是 300px 的 倍数 ,最 后 一 列 的 宽度 会 不 会 比 
前 面 几 列 要 窄 呢 ? 实际 上 ,CSS3 的 分 列 算法 会 自动 调整 列 的 宽度 ,使 它们 更 好 地 适应 父 
元 素 , 因 此 使 用 这 种 属性 得 到 的 每 列 宽度 也 是 相等 的 。 


2. 分 栏 布 局 的 属性 


分 栏 布局 的 其 他 属性 如 下 : 
设置 栏 间 距 ,例如 要 设置 栏 间距 为 2 个 字符 宽 , 就 是 column- 





(1) column-gap 
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gap:2em。 该 属性 的 值 最 好 设置 为 相对 值 。 

(2) column-span 跨 多 栏 属性 ,对 于 标题 等 不 需 分 栏 的 元 素 ,可 使 用 跨 多 栏 属性 ， 
例如 ,column-span:all。 该 属性 的 取 值 只 能 是 all 或 1。 默 认 情况 是 1, 表 示 不 跨栏 ,而 all 
表示 跨 所 有 栏 。 因 此 ,跨栏 属性 要 么 不 跨栏 ,要 么 跨 所 有 栏 , 如 果 和 希望 跨 任 意 几 栏 ( 如 跨 2 
栏 ) ,是 无 法 实现 的 。 


(3) column-rule 




















栏 间 线 属性 ,该 属性 可 以 为 栏 与 栏 之 间 添 加 一 条 分 隔 线 ,其 取 值 
3 写 规则 和 border 属性 相同 ,例如 ,column-rule:1px dashed red。 需 要 注意 的 是 , 栏 间 线 
的 宽度 不 能 超过 栏 间 距 ,否则 栏 间 线 将 不 会 显示 。 
下 面 是 一 个 实例 (5-45. html) ,其 显示 效果 如 图 5-61 所 示 。 


<div class="col"> 


<h3> 十 二 星座 传说 一 一 处 女 座 < /h3> 


<p> 人 间 管 理 谷物 的 农业 之 神 ……< /p><p> 有 一 天 她 和 同伴 正在 山谷 ……< /p> 
<p> 泊 瑟 芬 的 呼救 声 回荡 在 山谷 .海洋 ……< /p> 

</div> 

其 CSS 代码 如 下 : 

div.col { 


—webkit- column- count: 3; 

—webkit- column- gap: 1.5em; 

/*%* -webkit-column- rule:2px dashed #ccc;*/ 

font- size:14px; border:1px solid #e2e2e6; padding:0.5em; } 
div.col h3 { 

-webkit- column- span: all; -moz- column- span: all; 

text-align:center; border- bottom:1lpx dashed #c66;} 


div.col p{text- indent:2em;margin:0 auto;line- height:1.6em;} 


© 3 © Dfile:///E:/chuanshan/duolie.html 灾 己 


十 二 星座 传说 一 一 处 女 座 下 
人 间 管 理 谷物 的 农业 之 神 、 ”的 一 片 草地 上 摘 花 ， 突 然则 ， 她 。 瑟 芥 ， 设 下 诡计 捷 走 了 她 。 | 


希腊 的 大 地 之 母 一 狄 密 特 ， 有 一 。 看 到 一 条 银色 的 水 人 册 ， 于 是 她 远 泊 瑟 芥 的 呼救 声 回荡 在 山 

个 美丽 的 独生女 一 泊 配 芥 ， 她 是 。 离 同伴 偷偷 地 走 近 ， 伸 手 正 要 磁 。 谷 、 海 洋 之 间 ， 当 然 ， 也 传 到 了 

春天 的 灿烂 女神 ， 只 要 她 轻 轻 路 。 到 花 儿 ， 突 然 ， 地 底 裂 开 了 一 个 母亲 狄 密 特 的 耳 中 ， 狄 密 特 非常 

过 的 地 方 ， 都 会 开 满 娇艳 侈 润 的。 洞 ， 一 辆 马车 由 两 匹 黑马 拉 着 ， 。 的 翡 伤 ! 她 抛 下 了 待 收 制 的 谷 

在 全 。 剖 出 地 面 ， 原 来 是 阴间 之 王 海 地 。 物 ， 飞 过 千 山 万 水 去 寻找 女儿 。 
有 一 天 她 和 同伴 正在 山谷 中 士 ， 他 因 爱 募 “ 景 美的 春 神 ” 泊 





图 5-61 多 列 效果 示意 图 
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提示 : 

(1) 分 栏 属性 目前 还 没有 成 为 一 个 通用 的 CSS 属性 。 因 此 ,使 用 分 栏 属 性 时 要 注意 
加 浏览 器 前 缓 : -webkit- 用 于 chrome 或 Safari,-moz- 用 于 Firefox。 

(2) 如 果 在 分 栏 中 插入 图 片 ,并 且 图 片 的 宽度 超过 了 栏 的 宽度 , 则 在 Chrome 浏览 器 
中 ,超出 的 图 像 部 分 会 被 裁 切 而 不 显示 ,但 Firefox 仍然 会 显示 超出 栏 宽 的 图 片 。 


3. 栏 的 中 断 


一 栏 结束 而 下 一 栏 开始 的 位 置 称 为 中 断 (break) ,对 于 有 些 元 素 , 比 如 子 标题 或 者 列 
表 , 它 们 不 应 该 在 各 列 之 中 被 拆 分 。 这 时 ,可 以 使 用 column-break-before、column-break- 
after 或 column-break-inside 确保 它们 不 会 处 在 中 断 位 置 上 。 

(1) column-break-before: 设置 是 否 在 该 元 素 之 前 生成 新 的 栏 , 例 如 ，column-break- 
before:always 表示 总 是 在 元 素 之 前 断 行 并 产生 新 的 栏 。 

(2) column-break-after: 设置 是 否 在 该 元 素 之 后 生成 新 的 栏 。 例 如 ,column-break- 
after:avoid 表示 总 是 避免 在 该 元 素 之 后 断 行 并 产生 新 的 栏 , 这 样 可 保证 子 标题 不 会 位 于 
一 栏 的 最 下 方 。 

(3) column-break-inside: 避免 在 某 个 元 素 内 部 产生 新 栏 。 例 如 , column-break- 
inside:avoid 表示 避免 在 某 个 元 素 内 部 产生 新 栏 , 这 样 可 保证 子 标题 等 元 素 不 会 被 拆 分 到 
两 栏 中 。 


5.7 CSS 浏览 器 的 兼容 问题 * 


由 于 CSS 样式 以 及 页 面 各 种 元 素 在 不 同 浏览 器 中 的 表现 不 同 ,所 以 必须 考虑 网 页 代 
码 的 浏览 器 兼容 问题 。 解 决 兼容 性 问题 一 般 可 以 遵循 以 下 两 个 原则 : 

(1) 尽量 使 用 兼容 属性 ,因为 并 不 是 所 有 的 CSS 属性 都 存在 兼容 的 问题 ,所 以 如 果 使 
用 所 有 浏览 器 都 能 理解 一 致 的 属性 .那么 兼容 的 问题 也 就 不 存在 了 。 

(2) 使 用 CSS Hack 技术 ,CSS Hack 技术 是 通过 被 某 些 浏览 器 支持 而 其 他 浏览 器 不 
支持 的 语句 ,使 一 个 CSS 样式 能 够 按 开发 者 的 目的 被 特定 浏览 器 解释 或 者 不 能 被 特定 浏 


览 器 解释 。 
下 面 介绍 几 种 CSS Hack 的 常用 技术 ,它们 是 针对 IE6 及 以 上 浏览 器 和 Firefox 等 标 
准 浏览 器 兼容 问题 的 。 


1. 使 用 IE 条 件 注释 


条 件 注释 是 IE 特有 的 功能 .能够 使 IE 浏览 器 对 XHTML 代码 进行 单独 处 理 。 值 得 
注意 的 是 ,条 件 注 释 是 一 种 HTML 的 注释 ,所 以 只 针对 HTML, 当 然 也 可 以 将 CSS 通过 
行内 式 方法 引入 到 HTML 中 ,让 CSS 也 可 以 应 用 到 条 件 注释 。IE 条 件 注释 的 使 用 方法 
如 下 : 


<!-- [if IE]> 此 内 容 只 有 IE 可 见 , 其 他 浏览 器 会 忽略 掉 < ! [endif]--> 
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<!--[IifIE8.0]> 此 内 容 只 有 IE8.0 可见 <![endif]--> 
<!--[ifIE 9.0]> 此 内 容 只 有 IE9.0 可 见 <![endif]--> 


条 件 注释 还 可 使 用 关键 词 ,常见 的 关键 词 及 示例 代码 如 下 : 

。 gt(greater than) ,选择 大 于 指定 版 本 的 IE 版 本 。 

。 gte(greater than or equal) ,选择 大 于 或 等 于 指定 版 本 的 下 版 本 。 
。 lt(less than) ,选择 小 于 指定 版 本 的 IE 版 本 。 

。 lte(less than or equal) ,选择 小 于 或 等 于 指定 版 本 的 下 版 本 。 

。 1!1(not) ,选择 指定 版 本 外 的 IE 版 本 。 


<!--[Iif !IE 6.0]> 此 内 容 除了 IE6.0 之 外 都 可 见 < ![endif]--> 
<!-- [if lte IE 8]> 此 内 容 IE8 及 其 以 下 版 本 可 见 < ![endif]--> 
<!-- [if gte IE 9]> 此 内 容 IE9 及 其 以 上 版 本 可 见 < ![endif]--> 


在 IE10 及 以 上 版 本 中 ,已 经 取消 了 对 条 件 注释 的 支持 。 
2. 属性 级 Hack 


在 属性 值 前 后 添加 特殊 符号 可 选择 指定 的 浏览 器 。 例 如 ,在 属性 值 前 加 ”* ”表示 选 
择 IE7 以 下 ,在 属性 值 后 加 “\0” 表 示 选 择 IE8 以 上 和 Operal5 以 下 。 示 例如 下 : 


.test { 
color: #090\9; /*For IE8+ # / 
关 color: #£00; /* For IE7 and earlier*/ 
_color: #ff0; } /* For IE6 and earlier*/ 
3. 选择 器 Hack 


由 于 有 些 较 老 的 浏览 器 不 支持 一 些 比较 新 的 选择 器 ,因此 可 以 利用 浏览 器 的 支持 能 
力 来 进行 选择 。 例 如 : 


闪 html .test { color: #090; } /* For IE6 and earlier*/ 
x*+html .test { color: #ff0; } /* For IE7#*/ 
.test:lang (zh- cmn- Hans) { color: #f00; } /* For IE8+and not IE*/ 


.test:nth- child(1){ color: #0ff; } 
/* For IE9+and not IE, IE8 以 下 不 支持 这 种 选择 器 * / 


上 述 代码 中 的 第 3、4 两 行 就 是 典型 的 利用 能 力 来 进行 选择 的 CSS Hack。 
习 题 


1. 关于 浮动 ,下 列 哪 条 样式 规则 是 不 正确 的 ?( 家 
A. img { float: left; margin: 20px; } 
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B. img { float: right; right: 30px; } 
C. img { float: right; width: 120px; height: 80px; } 
D. img { float: left; margin-bottom: 2em; } 
2. 对 于 样式 并 pl{ float: left; display:inline; } ,元 素 #pl 将 以 哪 种 元 素 显 示 ? 
‘ ) 
A. 块 级 B. 行内 C. 行内 块 D. 出 错 
3. 在 图 像 蔡 代 文本 技术 中 ,为 了 隐藏 二 hl 二 标记 中 的 文本 ,同时 显示 hl 元 素 的 背景 
图 像 ,需要 使 用 的 CSS 声明 是 ( ”)。 
A. text-indent: —9999px; B. font-size: 0; 
C. text-decoration: none; D. display: none; 
4. 搬入 的 内 容 大 于 盒子 的 尺寸 时 ,如 果 要 使 盒子 通过 延伸 来 容纳 额外 的 内 容 。 应 设 
置 overflow 属性 值 为 ( Js 
A. visible B. scroll C. hidden D. auto 
5. 对 元 素 设置 以 下 哪些 属性 后 ,元 素 将 以 行内 块 (inline-block) 元 素 显 示 ( 多 选 )? 
( ) 
A. float: left B. position: absolute 
C. position: relative D. position: fixed 
6. vertical-align 属性 对 以 下 哪 种 类 型 的 元 素 是 无 效 的 ?( ) 
A. 块 级 B. 行内 C. 行内 块 D. 表格 单元 格 
7. 下 列 各 项 描述 的 定位 方式 是 什么 ? (填写 static、relative、absolute 中 的 一 项 或 
多 项 。) 
(1) 元 素 以 它 的 包含 框 为 定位 基准 。 。 
(2) 元 素 完 全 脱离 了 标准 流 。 
(3) 元 素 相 对 于 它 原来 的 位 置 为 定位 基准 。 。 
(4) 元 素 在 标准 流 中 的 位 置 会 被 保留 。 g 
(5) 元 素 在 标准 流 中 的 位 置 会 被 其 他 元 素 占据 。 
(6) 能 够 通过 z-index 属性 改变 元 素 的 层 芭 次 序 。 
8. 开启 弹性 盒 布 局 模型 需要 对 元 素 添 加 属性 。 
9. 分 栏 布局 中 设置 分 栏 的 数目 应 使 用 属性 。 
10. 如 果 要 使 过 长 的 文本 自动 省 略 并 添加 省 略 号 ,可 使 用 。 
11. 如 果 希 望 元 素 内 的 单行 文本 垂直 居中 ,可 对 该 元 素 设置 属性 。 
12. 对 一 个 元 素 可 同时 设置 相对 定位 和 浮动 吗 ? 
13. 简 述 制作 纯 CSS 下 拉 菜 单 的 原理 和 主要 步骤 。 
14. 将 5.4.2 节 中 * 小 提示 窗口 ?部 分 的 5-23. html 改写 成 具有 渐 隐 渐 现 过 渡 效 果 的 
代码 。 
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第 6 章 ”表格 与 表单 


在 HTML 中 ,表格 (table) 和 表单 (form) 都 是 由 成 组 的 标记 定义 的 ,因此 其 结构 代码 
相对 复杂 。 同 样 ,表格 和 表单 也 需要 CSS 对 其 美化 样式 ,以 便 提 供 更 友好 的 操作 界面 。 


6.1 创建 表格 


在 网 页 中 使 用 表格 的 两 个 常见 原因 是 : 在 表格 中 排列 数据 ,从 而 用 来 呈现 数据 间 的 
关系 ;或 者 在 表格 中 嵌入 图 像 和 文本 ,以 达到 精确 控制 文本 和 图 像 在 网 页 中 位 置 的 目的 ， 
也 就 是 网 页 布局 。 但 随 着 CSS 布局 被 广泛 接受 ,表格 布局 的 功能 已 被 逐渐 淡化 。 


6.1.1 表格 标记 


网 页 中 的 表格 由 二 table 二 标记 定义 ,一 个 表格 由 若干 行 二 tr 二 组 成 ,每 行 又 被 分 成 若 
干 个 单元 格 二 td> ,因此 一 table>、 一 tr、 一 td 是 表格 中 3 个 最 基本 的 标记 ,必须 同时 
出 现 才 有 意义 。 表 格 中 的 单元 格 能 容纳 网 页 中 的 任何 元 素 , 如 图 像 文本、 列表 .表单 、 表 
格 等 。 

1. 二 table 二 标记 

下 面 是 一 个 最 简单 的 表格 代码 (6-1. html) , 它 的 显示 效果 如 图 6-1 所 示 。 


<table border= "1"> 
<tr><td>CELL 1</td><td>CELL 2< /td> 
</tr> 
<tr><td>CELL 3< /td><td>CELL 4< /td> 
< /tr> 

</table> 


从 图 6-1 可 知 ,一 个 二 tr 二 标记 表示 一 行 ,二 tr 二 标记 中 有 两 
个 二 td 二 标记 ,表示 一 行 中 有 两 个 单元 格 , 因 此 显示 为 2 行 2 列 的 CELL LICELL 2 
表格 。 要 注意 在 表格 中 行 比 列 大 ,总 是 一 行 一 tr 中 包含 若干 个 CELL 3 引 CELL 4 
单元 格 一 td> 。 图 6-1 最 简单 的 表格 

二 table 记 标记 中 还 可 设置 边框 宽度 (border 二 "1"), 它 表示 表 
格 的 边框 是 1px 宽 。 下 面 将 边框 宽度 调整 为 10px, 即 二 table border 王 "10" 二 ,这 时 显示 
效果 如 图 6-2 所 示 。 

此 时 虽然 表格 的 边框 宽度 变 成 了 10px, 但 表格 中 每 个 单元 格 的 边框 宽度 仍然 是 
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cellpadding= "12” 
图 6-2 border 和 cellpadding 属性 


1px, 从 这 里 可 看 出 设置 表格 边框 宽度 不 会 影响 单元 格 的 边框 宽度 。 

但 有 一 个 例外 ,如 果 将 表格 的 边框 宽度 设置 为 0, 即 二 table border 王 "0" 二 (由 于 
border 属性 的 默认 值 就 是 0, 因 此 也 可 不 设置 ) , 则 单元 格 的 边框 宽度 也 跟着 变 为 了 0。 此 
时 表格 边框 和 单元 格 边框 都 消失 ,在 用 表格 进行 网 页 布局 时 通常 需要 这 样 设置 。 

由 此 可 得 出 结论 : 设置 表格 边框 为 0 时 ,会 使 单元 格 边框 也 变 为 0; 而 设置 表格 边框 
为 其 他 数值 时 ,单元 格 边框 宽度 保持 不 变 , 始 终 为 1。 


2. 填充 和 间距 


填充 (cellpadding) 和 间距 (cellspacing) 是 二 table 二 标记 两 个 重要 的 属性 ,cellpadding 
表示 单元 格 中 的 内 容 到 单元 格 边 框 之 间 的 距离 ,默认 值 为 0; 而 cellspacing 表示 相 邻 单元 
格 之 间 的 距离 ,默认 值 为 1。 

合理 设置 填充 和 间距 属性 可 美化 表格 。 例 如 ,将 表格 填充 设置 为 12, 即 二 table 
border 二 "10" cellpadding 王 "12" 二 , 则 显示 效果 如 图 6-2 所 示 。 

把 表格 填充 设置 为 12, 间 距 设置 为 15, 即 二 table border 二 "10" cellpadding 二 "12" 
cellspacing 一 "15" 之 , 则 显示 效果 如 图 6-3 所 示 。 








cellspacing="15" 





图 6-3 cellspacing 属性 


此 外 ,表格 二 table 二 标记 还 具有 宽 (width) 和 高 (height) 、 水 平 对 齐 (align) .背景 颜色 
(bgcolor) 等 属性 , 表 6-1 列 出 了 过 table 二 标记 的 常见 属性 。 


表 6-1 二 table 二 标记 的 常见 属性 











二 table 二 的 属性 会 问 
border 表格 边框 的 宽度 ,默认 值 为 0 
bgcolor 表格 的 背景 色 (HTML5 不 建议 使 用 ) 
cellspacing 表格 的 间距 ,默认 值 为 1 
cellpadding 表格 的 填充 ,默认 值 为 0 
width ,height 表格 的 宽 和 高 ,可 以 使 用 像素 或 百分比 作 单位 
rules 只 显示 表格 的 行 边 框 (rows) 或 列 边 框 (cols) 
align 表格 的 对 齐 属性 ,可 以 让 表格 左右 或 居中 对 齐 
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6.1.2 表格 行 和 单元 格 标记 


到 tr> 表 示 表 格 中 的 一 行 , 该 标记 的 常用 属性 有 : 

(1) align 一 一 统一 设置 该 行 中 所 有 单元 格 中 内 容 的 水 平 对 齐 方式 ; 

(2) valign 一 一 统一 设置 该 行 中 所 有 单元 格 内 容 的 垂直 对 齐 方式 ; 

(3) bgcolor 设置 该 行 的 背景 颜色 。 

表 头 标记 和 th> 相 当 于 一 个 特殊 的 单元 格 志 td 之 标记, 唯一 区 别 是 和 二 th 中 的 字符 
会 以 粗 体 居中 方式 显示 。 可 以 将 表格 第 一 行 (第 一 个 二 tr 二 ) 中 的 二 td 二 换 成 二 th 二 , 表 
示 表 格 的 表 头 。 

对 于 单元 格 标 记 二 td 二 、 二 th 二 来 说 ,它们 具有 一 些 共同 的 属性 ,包括 width height、 
align、valign、nowrap( 不 换行 )、bordercolor、bgcolor 和 background。 这 些 属性 对 于 行 标 
记过 tr 二 来 说 ,大 部 分 都 具有 ,只 是 没有 width 和 background 属性 。 


1. 单元 格 标记 的 对 齐 属性 


单元 格 一 td> 或 二 th 二 标记 具有 align 和 valign 属性 ,其 含义 如 下 : 

(1) align 一 一 单元 格 中 内 容 的 水 平 对 齐 属 性 , 取 值 有 left( 默 认 值 ) .center、right。 

(2) valign 一 一 单元 格 中 内 容 的 垂直 对 齐 属 性 , 取 值 有 middle( 默 认 值 ) ,top .bottom。 

即 单元 格 中 的 内 容 默认 是 水 平 左 对 齐 、 垂 直 居 中 对 齐 的 。 由 于 默认 情况 下 单元 格 是 
以 能 容纳 内 容 的 最 小 宽度 和 高 度 定义 大 小 的 ,所 以 必须 设置 单元 格 的 宽 和 高 使 其 大 于 最 
小 宽 高 值 时 才能 看 到 对 齐 的 效果 。 例 如 下 面 的 代码 (6-2. html) 显示 效果 如 图 6-4 所 示 。 





<table width="256" border="4" cellpadding= "2"> 
<tr valign= "bottom" height="58"> 
<tqd width="82"> 底 端 对 齐 < /td> 
<td width="96" valign= "top"> 顶端 对 齐 < /td> 
EP 
<tr align="center" height="54"> 
<td valign= "top"> 水 平 居 中 顶端 < /td> 








<td> 水 平 居中 < /td> 
EE 
</table> 
顶端 对 齐 
底 端 对 齐 
水 平 居 中 顶端 
水 平 居 中 











图 6-4 align 属性 和 valign 属性 
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2. bgcolor 属性 


bgcolor 属性 是 二 table>、 一 tr 二 .一 td 都 具有 的 属性 ,用 来 对 表格 或 单元 格 设置 背 
景色 。 在 实际 应 用 中 , 常 将 所 有 单元 格 的 背景 色 设置 为 一 种 颜色 ,将 表格 的 背景 色 设置 为 
另 一 种 颜色 。 此 时 如 果 间 距 (cellspacing) 不 为 0, 则 表格 的 背景 色 会 环绕 单元 格 , 使 间距 
看 起 来 像 边 框 一 样 。 例 如 下 面 的 代码 (6-3. html) 显示 效果 如 图 6-5 所 示 。 

<table border= "1l" cellpadding="12" cellspacing="5" bordercolor= "#333333" bgcolor 

="#cccccc"> 

<tr bgcolor="#ffffff"><td>CELL 1</td><td>CELL 2</td></tr> 

<tr bgcolor="#ffffff"><td>CELL 3</td><td>CELL 4</td></tr> 

</table> 


如 果 在 此 基础 上 将 表格 的 border 属性 设置 为 0, 则 显示 效果 如 图 6-6 所 示 , 可 看 出 此 
时 间距 像 边框 一 样 了 ,而 这 个 由 间距 形成 的 “边框 ”实际 上 是 表格 的 背景 色 。 


CELL 3 CELL 4 CELL 3 上 CELL 4 


图 6-5 设置 表格 背景 色 为 灰色 、 单 元 格 图 6-6 在 图 6-5 基础 上 将 表格 
背景 色 为 白色 的 效果 边框 设置 为 0 





如 果 要 减少 bgcolor 属性 的 书写 次 数 , 可 以 使 用 二 tbody 二 标记 ,在 所 有 二 tr 之 标记 的 
外 面 嵌 套 一 个 二 tbody 之 标记 ,再 设置 二 tbody 二 的 背景 色 为 白色 即 可 ,例如 (6-4. html) : 


<table cellpadding="12" cellspacing="5" bordercolor= "#333333" bgcolor= 
"#cccccc"> 
<tbody bgcolor= "#ffffff"> 
<tI><td>CELL 1< /td><td>CELL 2< /td></tr> 
<tr><td>CELL 3< /td><td>CELL 4< /td></tr> 
</tbody> 
</table> 


提示 : 天 tbody 二 是 表格 体 标记 , 它 包含 表格 中 所 有 的 行 或 单元 格 。 因 此 ,如 果 所 有 
单元 格 或 行 的 某 个 属性 都 相同 ,可 以 将 该 属性 写 在 二 tbody 二 标记 中 ,例如 上 述 代 码 中 的 
(bgcolor 二 "#ffffff") ,这 样 可 减少 代码 宛 余 。 


3. 单元 格 的 合并 属性 


如 果 要 合并 某 些 单元 格 制 作出 如 图 6-7 所 示 的 表格 , 则 必须 使 用 单元 格 的 合并 属性 ， 
单元 格 二 td 二 标记 的 合并 属性 有 colspan( 跨 多 列 属性 ) 和 rowspan( 跨 多 行 属 性 ), 是 
去 td> 标 记 特 有 的 属性 ,分 别 用 于 合并 列 或 合并 行 。 例 如 (6-5. html) : 
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<td rowspan= "3"> 课 程 表 < /td> <!-- 合 并 上 下 3 行 单元 格 --> 
<td colspan= "2"> 星 期 一 </td> <!-- 合 并 左右 2 列 行 单元 格 --> 
| 星期 一 
课程 表 | 上 午 ,| 下 午 
语文 数学 

















图 6-7 单元 格 合并 后 的 效果 


可 见 ,合并 3 行 单元 格 将 使 该 行 下 的 两 行 的 两 个 二 tr 二 标记 中 分 别 减少 一 个 二 td 二 
标记 ;而 合并 2 列 单元 格 , 将 使 该 行 <tr 二 标记 中 减少 一 个 二 td 二 标记 。 如 果 一 个 单元 格 
由 3 行 3 列 9 个 单元 格 合并 而 成 , 则 需要 同时 使 用 colspan 和 rowspan 属性 。 

提示 : 设置 了 单元 格 合并 属性 后 ,再 对 单元 格 的 宽 或 高 进行 精确 设置 会 发 现 不 容易 
了 ,因此 在 用 表格 布局 时 不 推荐 使 用 单元 格 合并 属性 ,使 用 表格 谋 套 更 合适 些 。 


4. 一 caption 二 标记 


所 caption 之 标记 用 来 为 表格 添加 标题 ,这 个 标题 固然 可 以 用 普通 的 文本 实现 ,但 是 
使 用 二 caption 二 标记 可 以 更 好 地 描述 这 个 表格 的 含义 。 例 如 : 


<table cellpadding="12" cellspacing="5"> 
<caption>2017 年 课程 表 </caption> ”<!--<caption> 必 须 位 于 <table> 标 记 内 --> 
<tr><td>*"</td></tr>"* 

</table> 


6.1.3 在 DW 中 操作 表格 的 方法 


1. 在 DW 中 选中 表格 的 方法 


对 表格 进行 操作 之 前 必须 先 选中 表格 ,有 时 几 层 表格 嵌 套 在 一 起 ,在 DW 设计 视图 
中 使 用 以 下 方法 仍然 可 以 方便 地 选中 表格 或 单元 格 。 

(1) 选择 整个 表格 : 将 鼠标 指针 移 到 的 表格 左上 角 或 右 下 角 时 ,光标 右 下 角 会 出 现 
表格 形状 ,此 时 单 击 就 可 以 选中 整个 表格 ,或 者 在 表格 区 域内 单 击 一 下 ,再 选择 状态 栏 上 
的 二 table 二 标签 按钮 。 

(2) 选择 一 行 或 一 列 单元 格 : 将 鼠标 指针 置 于 一 行 的 左边 框 上 ,或 置 于 一 列 的 顶端 
边框 上 ,当选 定 箭头 ( 娘 ) 出 现时 单 击 ,选择 一 行 也 可 单 击 状态 栏 中 的 二 tr 之 标签 按钮 。 

(3) 选择 连续 的 几 个 单元 格 : 在 一 个 单元 格 中 单 击 并 拖 动 鼠标 横向 或 纵向 移 至 另 一 
单元 格 。 
(4) 选择 不 连续 的 几 个 单元 格 : 按 住 Ctrl 键 , 单 击 欲 选 定 的 单元 格 、 行 或 列 。 
(5) 选择 单元 格 中 的 网 页 元 素 : 直接 单 击 单元 格 中 的 网 页 元 素 。 
提示 : 按 住 Ctrl 键 ,鼠标 在 表格 上 滑动 DW 会 高 亮 显示 表格 结构 。 
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2. 向 表格 中 插入 行 或 列 的 方法 


当 光 标 位 于 表格 内 时 , 右 击 , 在 弹出 菜单 中 选择 “表格 ”一 “ 择 入行 (或 插入 列 )” 命 令 可 
在 表格 的 当前 行 的 上 方 插入 一 行 , 或 当前 行 的 左边 插入 一 列 , 若 要 在 表格 的 最 右边 插入 一 
列 或 最 下 方 插入 一 行 , 可 选择 “表格 ”>“ 插 入行 或 列 ” 命 令 ,在 所 选 列 之 后 或 所 选 行 之 下 插 
人 列 或 行 。 插 入 行 也 可 以 在 代码 视图 中 复制 一 行 的 代码 “二 tr 二 >… 达 /tr 二 ”再 粘贴 几 次 
就 插入 了 几 行 ,而 插入 列 在 代码 视图 中 不 方便 进行 。 


3. 设置 单元 格 中 内 容 居中 对 齐 的 方法 


在 默认 情况 下 ,表格 会 单独 占据 网 页 中 的 一 行 , 左 对 齐 排列 。 表 格 具 有 水 平 对 齐 属性 
align, 可 以 设置 align 王 "center" 让 表格 水 平 居 中 对 齐 ,位 于 一 行 的 中 央 。 而 单元 格 二 td 
则 具有 水 平 对 齐 align 和 垂直 对 齐 valign 属性 ,它们 的 作用 是 使 单元 格 中 的 内 容 相 对 于 
单元 格 水 平 居中 或 垂直 居中 ,在 默认 情况 下 ,单元 格 中 的 内 容 是 垂直 居中 ,但 水 平 左 对 

如 果 在 单元 格 中 有 一 段 无 格式 的 文字 ,例如 : 

<td> 版 权 所 有 &copy; 数 学 系 < /td> 

(1) 要 使 这 段 文 字 在 单元 格 中 居中 对 齐 , 那 么 有 两 种 方法 可 以 做 到 。 一 是 在 设计 视 
图 中 选中 这 些 文字 ,然后 使 用 文本 自身 的 对 齐 属性 来 居中 对 齐 。 即 单 击 图 6-8 中 四 处 的 
按钮 。 

此 时 ,可 发 现 文本 已 经 居中 ,切换 到 代码 视图 ,代码 已 修改 为 : 


<td><div align= "center"> 版 权 所 有 &copy; 数 学 系 </div>< /td> 


元 | 元。 可 cealelal 二 二 下 目 [ 
Ee | age 二 三亚 


单元 格 。 ”水 看 [居中 ?=] 门 宽 | 200 。 不 换行 厂 。 青 景 
[=| ENE CREE 





图 6-8 单元 格 中 文本 对 齐 的 两 种 方法 


这 种 方法 DW 会 自动 为 文本 添加 一 个 div 标记 ,再 使 用 div 标记 的 align 属性 使 文本 
对 齐 , 这 是 因为 这 段 文本 没有 格式 标记 环绕 ,要 使 它们 居中 只 能 添加 一 个 标记 ,如 果 文 本 
被 格式 标记 (如 p 标记 ) 环 绕 ,那么 就 会 直接 在 p 标记 中 添加 align 二 "center" 属 性 。 

(2) 由 于 文本 位 于 单元 格 中 ,第 2 种 使 文本 居中 的 方法 是 利用 单元 格 的 对 齐 属性 , 即 
单 击 图 6-8 中 加 处 的 按钮 ,可 发 现 文本 也 能 居中 对 齐 , 对 应 的 代码 如 下 : 


<td align= "center"> 版 权 所 有 scopy; 数 学 系 </td> 


可 见 ,第 2 种 方法 不 会 增加 一 个 标记 ,推荐 使 用 该 方法 对 齐 单元 格 中 的 文本 。 
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6.1.4 制作 固定 宽度 的 表格 


如 果 不 定义 表格 中 每 个 单元 格 的 宽度 ,那么 当 向 单元 格 中 插入 网 页 元 素 时 ,表格 往往 
会 变形 。 这 样 无 法 利用 表格 精确 定位 网 页 中 的 元 素 , 网 页 中 会 有 很 多 不 必要 的 空隙 ,使 网 
页 显得 不 紧凑 也 不 美观 ,因此 要 利用 固定 宽度 的 表格 和 单元 格 精确 地 包含 住 其 中 的 内 容 。 
制作 固定 宽度 的 表格 通常 有 以 下 两 种 方法 。 

(1) 定义 所 有 列 的 宽度 ,但 不 定义 整个 表格 的 宽度 。 示 例 (6-6. html) 如 下 : 


<table border= "0" cellspacing="0" cellpadding="0"> 
<tr><td width="200"> gnbsp;< /td> 
<td width="360"> gnbsp; </td> 
<td width="200"> gnbsp; </td> 
</tr></table> 


整个 表格 的 实际 宽度 为 : 所 有 列 的 宽度 和 十 边框 宽度 和 十 间距 和 十 填充 和 。 这 时 
候 , 只 要 单元 格 内 的 内 容 不 超过 的 单元 格 的 宽度 ,表格 就 不 会 变形 。 

(2) 定义 整个 表格 的 宽 , 如 500px、98% 等 ,再 留 一 列 的 宽度 不 定义 ,未 定义 的 这 一 列 
的 宽度 为 整个 表格 的 宽度 一 已 定义 列 的 宽度 和 一 边框 宽度 和 一 间距 和 一 填充 和 ,同样 在 
插入 内 容 时 也 不 会 变形 。 

由 于 网 页 的 总 宽度 、 每 列 的 宽度 都 要 固定 ,所 以 制作 固定 宽度 的 表格 是 用 表格 进行 网 
页 布局 的 基础 。 而 网 页 布局 时 一 般 是 不 需要 指定 布局 表格 高 度 的 ,因为 随 着 单元 格 中 内 
容 的 增加 ,布局 表格 的 高 度 也 会 自 适应 地 增加 。 

因此 制作 固定 高 度 的 表格 相对 来 说 用 得 较 少 ,只 有 在 单元 格 中 插入 图 像 时 ,为 了 保证 
单元 格 和 图 像 之 间 没 有 间 院 ,需要 把 单元 格 的 宽 和 高 设置 为 图 像 的 宽 和 高 ,填充 .间距 和 
边框 值 都 设 为 0, 并 保证 单元 格 标记 内 除了 图 像 元 素 , 没 有 其 他 空格 或 换行 符 。 

提示 : 在 用 表格 布局 时 不 推荐 使 用 鼠标 拖 动 表格 边框 的 方式 来 调整 其 大 小 ,这 样 会 
在 表格 标记 内 自动 插入 width 和 height 属性 。 如 果 所 有 单元 格 的 宽 已 固定 ,又 定义 了 表 
格 的 宽度 ,那么 所 有 单元 格 的 宽度 都 会 按 比 例 发 生 改 变 ,导致 用 表格 布局 的 网 页 里 的 内 容 
排列 混乱 。 


6.1.5 特殊 效果 表格 的 制作 


1. 制作 1px( 细 线 ) 边 框 的 表格 


一 般 来 说 ,1px 边框 的 表格 在 网 页 中 显得 更 美观 。 特 别 是 用 表格 作 栏目 框 时 ,1px 边 
框 的 栏目 框 是 大 部 分 网 站 的 选择 ,因此 ,制作 1px 边框 的 表格 已 成 为 网 页 设计 的 一 项 基 
本 要 求 。 

但 是 把 表格 的 边框 (border) 定 义 为 1px 时 (border 二 "1"), 其 实际 宽度 是 2px。 这 样 
的 表格 边框 显得 很 粗 而 不 美观 。 要 制作 1px 的 细 线 边框 可 用 如 下 任意 一 种 方法 实现 。 
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(1) 用 间距 作 边 框 。 原 理 是 通过 把 表格 的 背景 色 和 单元 格 的 背景 色调 整 成 不 同 的 颜 
色 ,使 间距 看 起 来 像 一 个 边框 一 样 ,再 将 表格 的 边框 设 为 0, 间距 设 为 1, 即 实现 1px“ 边 
框 ? 表 格 。 代 码 (6-7. html) 如 下 : 


<table border="0" cellspacing="1" bgcolor= "#000000"> 
<tr><td bgcolor="#ffffff">1 像素 边框 表格 < /td>< /tr> 
</table> 


(2) 用 CSS 属性 border-collapse 制作 1px 边框 的 表格 。 先 把 表格 的 边框 (border) 设 
为 1, 间 距 (cellspacing) 设 为 0, 此 时 表格 边框 和 单元 格 边 框 紧 挨 在 一 起 ,所 以 边框 的 宽度 
为 1 十 1 二 2px。 这 是 因为 border-collapse 的 默认 值 是 separate, 即 表格 边框 和 单元 格 边框 
不 重 倒 。 如 果 把 border-collapse 的 值 设 为 collapse( 重 释 ), 则 表格 边框 和 单元 格 边 框 将 
发 生 重生 ,因此 边框 的 宽度 为 1 px。 代 码 (6-8. html) 如 下 : 


<table border= "1" cellspacing= "0" bordercolor="#ff0000" style="border- collapse: 
collapse">…</table> 


2. 用 单元 格 制作 水 平 线 或 占 位 表格 


如 果 需 要 水 平 或 竖 直 的 线段 ,可 以 使 用 表格 的 行 或 列 来 制作 ,例如 ,在 表格 中 需要 一 
条 黑色 的 水 平 线段 , 则 可 以 这 样 制作 : 先 把 某 一 行 的 行 高 设 为 1; 再 把 该 行 的 背景 色 设 为 
黑色 ;最 后 在 “代码 ”视图 中 去 掉 此 行 单元 格 中 的 “&nbsp;” 占 位 符 空格 。 因 为 *&nbsp;” 
是 DW 在 插入 表格 时 自动 往 每 个 单元 格 中 添加 的 一 个 字符 ,如 果 不 去 掉 , 则 IE 默认 一 个 
字符 占据 12px 的 高 度 。 这 样 就 制作 了 一 条 1px 粗 的 水 平 黑 线 。 代 码 (6-9. html) 如 下 : 


<table width="200" border= "0" cellpadding= "0" cellspacing="0"> 
<tr><td height= "1l" bgcolor="#000000"></td> <!-- 单 元 格 中 的 "snbsp;" 已 去 掉 --> 
we 

</table> 


如 果 要 制作 1px 粗 的 竖 直 黑 线 ,可 在 上 述 代码 中 将 表格 的 宽 修改 为 1px, 单 元 格 的 高 
修改 为 竖 直 黑 线 的 长 度 即 可 。 

在 默认 情况 下 ,网 页 中 两 个 相 邻 的 表格 上 下 会 紧 挨 在 一 起 ,这 时 可 以 在 这 两 个 表格 中 
插入 一 个 占 位 表格 使 它们 之 间 有 一 些 间 隙 ,例如 ,把 占 位 表格 的 高 度 设 置 为 7px, 边 框 、 填 
充 、 间 距 设 为 0, 并 去 掉 单 元 格 中 的 “&nbsp;”, 则 在 两 个 表格 间 插 入 了 一 个 7px 高 的 占 位 
表格 ,这 样 就 避免 了 表格 紧 挨 着 的 情况 出 现 ,因为 我 们 通常 都 不 希望 两 个 栏目 框 上 下 紧 挨 
在 一 起 。 当 然 ,为 表格 设置 CSS 属性 margin 能 更 容易 地 实现 留 空隙 (推荐 使 用 ) 。 


3. 用 表格 制作 圆 角 栏目 杠 


如 图 6-9 所 示 的 固定 宽度 的 圆 角 栏目 框 是 用 表格 制作 的 。 当 然 ,我 们 推荐 使 用 CSS3 
制作 圆 角 框 ,本 例 是 为 了 帮助 读者 运用 表格 的 各 种 属性 而 作为 练习 的 。 制 作 步 骤 如 下 : 
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(1) 准备 两 张 圆 角 图 片 , 分 别 是 上 圆 角 和 下 圆 
角 的 图 像 。 


(2) 插入 一 个 3 行 1 列 的 表格 ,把 表格 的 填 i 
充 、 间 距 和 边框 设 为 0, 宽 设置 成 190px( 圆 角 图 片 a 
的 宽 ) ,高 不 设置 。 es 





(3) 分 别 设置 表格 内 3 个 单元 格 的 高 。 第 1 
个 单元 格 高 设置 为 38px( 上 圆 角 图 片 的 高 ); 第 2 ”图 6-9 用 表格 制作 的 贺 角 栏目 框 
个 单元 格 高 为 100px; 第 3 个 单元 格 高 为 17px( 下 
圆 角 图 片 的 高 )。 在 第 1、3 个 单元 格 内 分 别 插入 上 贺 角 和 下 圆 角 的 图 片 。 

(4) 把 第 2 个 单元 格 内 容 的 水 平 对 齐 方式 设置 为 居中 (align 二 "center") ,单元 格 的 背 
景 颜色 设置 为 圆 角 图 片 边框 的 颜色 (bgcolor 二 "#E78BB2")。 

(5) 在 第 2 个 单元 格 中 再 插入 一 个 1 行 1 列 的 表格 ,把 该 表格 的 间距 和 边框 设 为 0， 
填充 设 为 8px( 让 栏目 框 中 的 内 容 和 边框 之 间 有 一 些 间隔 ) , 宽 设 为 186px, 高 100px。 背 
景 颜 色 设置 为 比 边框 浅 的 颜色 (bgcolor 王 " 寺 FAE4E6")。 生 成 的 代码 见 6-10. html。 

提示 : 第 (5) 步 也 可 以 不 插入 表格 ,而 是 把 第 2 个 单元 格 拆 分 成 3 列 , 把 3 列 对 应 的 
3 个 单元 格 的 宽 分 别 设置 为 2px、186px 和 2px, 并 在 代码 视图 把 这 3 个 单元 格 中 的 
“&.nbsp;” 去 掉 , 然 后 把 第 1、3 列 的 背景 色 设置 为 圆 角 边框 的 颜色 ,第 2 列 的 背景 色 设 为 
圆 角 背景 的 颜色 ,并 用 CSS 属性 设置 它 的 填充 为 8px(style 二 "padding:8px")。 


6.2 使 用 CSS 美化 表格 
6.2.1 边框 和 背景 的 美化 


通过 CSS 盒子 模型 的 边框 属性 可 以 很 容易 地 制作 出 如 图 6-10 所 示 的 1px 虚线 边框 
的 表格 。 方 法 是 首先 在 把 表格 的 HTML 边框 属性 设置 为 0, 然 后 给 表格 table 用 CSS 添 
加 1px 的 实 线 边框 ,再 给 第 一 行 的 单元 格 td 用 CSS 添加 虚线 的 下 边框 。 为 了 让 单元 格 
的 虚线 边框 与 表格 的 边框 不 交合 ,设置 表格 的 间距 不 为 0 即 可 。 代 码 (6-11. html) 如 下 : 


<style> 
table {border: lpx solid #03F; width:168px; border- radius:6px;} 
table:hover{ box- shadow: 0 0 10px #0CC; background- image: linear— gradient (#fff 
92%, #9ee);} 
td.title { 
border-bottom: lpx dashed #06F; 
font- size:14px;font—-weight:bold; text- indent:28px; 
background: url (img/123.png)no- repeat 0 — 4px;} 
td.test {text- indent:2em;line- height:160%;font- size:13px;} 
</style> 
<table cellpadding="3" cellspacing="8"> 
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<tr><td class="title"> 课 程 简 介 < /td></tr> 
<tr><td class= "test"> 电 子 商 务 专业 ……</td></tr> 
</table> 


\ 公 课程 简介 


电子 商务 专业 的 学 生 
应 掌握 网 页 设计 的 基础 知 


识 ， 因 为 以 后 要 接触 到 大 
量 的 修改 网 页 工作 ， 为 以 
后 打下 一 个 基础 RN 





图 6-10 CSS 虚线 边框 表格 


说 明 
(1) table 元 素 除 了 cellpadding 和 cellspacing 两 个 HTML 属性 不 好 用 CSS 属性 替 


代 外 ,其 他 属性 都 可 用 CSS 替代 。 


使 


(2) 对 于 单行 文本 ,要 使 其 向 右 移 动 ,有 两 种 方法 : 一 种 是 使 用 text-indent, 另 一 种 是 
用 padding-left ,推荐 第 一 种 方法 。 


6.2.2 隔行 变色 效果 


数 


CSS3 提供 了 :nth-child(n) 结 构 伪 类 选择 器 , 它 可 选择 任意 的 子 元 素 , 该 选择 器 的 参 
n 有 3 种 形式 : 数字 、 关 键 词 (even 或 odd) 或 公式 (如 2n) 。 
制作 隔行 变色 的 表格 ,只 要 用 :nth-child(n) 伪 类 选中 奇数 行 或 偶数 行 ,再 设置 不 同 的 


颜色 样式 即 可 。 代 码 (6-12. html) 如 下 ,效果 如 图 6-11 所 示 。 


table{width:500px;border:0;margin:10px auto 0; text-align:center; 
border- collapse:collapse;border- spacing:0;} 
th{background:#0090D7;line- height :30px;font- size:]14px;color:#FFF;} 


tr:nth- child (0dd) {background:#F4F4F4;} /* 设 置 奇数 行 的 背景 色 * / 
td:nth- child (even) {color:#c00;} /* 设 置 偶 数列 的 文字 颜色 * / 
tr:hover{background:#73B1E0;color:#FFF;} /* 鼠标 指针 滑 过 变色 * / 


td, table th{border:1lpx solid #EEE;} 
<table border="]" cellspacing="0" cellpadding="6"> 
<tr><th> 排 名 </th><th> 专 业 名 称 < /th><th> 类 别 < /th><th> 平 均 月 薪 < /th>< /tr> 
<tr><td>1</td><td> 电 子 信 息 工程 </td><td> 工 学 </td><td>7539 元 </td></tr> 


</table> 


在 图 6-11 中 , 表 头 行 的 背景 色 没 有 变 成 奇数 行 的 颜色 ,说 明 结构 伪 类 选择 器 的 优先 
比 标记 选择 器 .hover 伪 类 选择 器 都 低 ,CSS3 结构 伪 类 的 一 些 常 见 用 法 如 表 6-2 所 示 。 
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毕业 五 年 平均 月 薪 
电子 信息 工程 
自动 化 
软件 工程 


厂 告 学 





6 信息 与 计算 科学 理学 5515 元 





图 6-11 隔行 变色 和 悬 停 变色 效果 


表 6-2 CSS3 结构 伪 类 选择 器 
伪 类 名 功 能 
:nth-child(odd) 或 :nth-child(2n 一 1) | 匹配 父 元 素 的 奇数 个 子 元 素 
:nth-child(even) 或 :nth-child(2n) 匹配 父 元 素 的 偶数 个 子 元 素 
匹配 父 元 素 的 第 个子 元 素 ,n 从 1 开始 ,如 :nth-child(1) 等 价 











:nth-childCn) 

















于 :first-child 
:nth-last-child(n) 匹配 父 元 素 的 倒数 第 n 个 子 元 素 
:last-child 匹配 父 元 素 的 最 后 一 个 子 元 素 
:only-child 匹配 父 元 素 的 唯一 的 一 个 子 元 素 
:nth-of-type(n) 匹配 同类 型 的 第 ”个 同 级 兄弟 元 素 下 


6.3 创建 表单 


表单 是 浏览 器 与 服务 器 之 间 交 互 的 重要 手段 ,利用 表单 可 以 收集 客户 端 提交 的 信息 。 
图 6-12 是 一 个 用 户 注册 表单 ,用 户 单 击 “ 提 交 ” 按 钮 后 表单 中 的 信息 就 会 发 送 到 服务 器 。 





用 户 注册 (基本 信息 ) 
323 /可 
用 户 名 |qwer Wg 
性 别 @@ 风车。 C 合 * 玉 
论坛 密码 呈 DA 
一 遍 确 认 [ee 室友 
请 再 输 一 遍 确认 视 六 符合 要 求 
[Gomcm | VI 
E-Mail |tang123@tom.com 人 





请 回答 注册 问题 23 十 (5*2) 一 ? 
你 的 回答 是 [33 


wn Fa 十 本 | 


高 级 选项 “证 显示 高 信用 户 设置 选项 


后 同意 并 接 过 注册 协议 重重 
图 6-12 用 户 注册 表单 
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表单 由 表单 界面 和 服务 器 端 程序 (如 PHP) 两 部 分 构成 。 表 单 界 面 由 HTML 代码 编 
写 ,服务器 端 程序 用 来 收集 用 户 通过 表单 提交 的 数据 。 本 节 只 讨论 表单 界面 的 制作 。 在 
HTML 代码 中 ,可 以 用 表单 标记 定义 表单 ,并且 指 定 接收 表单 数据 的 服务 器 端 程序 文件 。 

表单 处 理 信息 的 过 程 为 : 当 单 击 表单 中 的 “提交 ”按钮 时 ,在 表单 中 填写 的 信息 就 会 
发 送 到 服务 器 ,然后 由 服务 器 端的 有 关 应 用 程序 进行 处 理 , 处 理 后 或 者 将 用 户 提 交 的 信息 
存储 在 服务 器 端的 数据 库 中 ,或 者 将 有 关 的 信息 返回 到 客户 端 浏览 器 。 


6.3.1 二 form 二 标记 及 其 属性 


二 form 放 标记 用 来 创建 一 个 表单 , 即 定义 表单 的 开始 和 结束 位 置 ,这 一 标记 有 几 方 
面 的 作用 。 首 先 , 限 定 表 单 的 范围 。 一 个 表单 中 的 所 有 表单 域 标记 ,都 要 写 在 二 form 二 
与 二 /form> 之 间 (CHTML5 对 表单 已 无 此 要 求 ), 单 击 提交 按钮 时 ,提交 的 也 是 该 表单 范 
围 内 的 内 容 。 其 次 ,携带 表单 的 相关 信息 ,例如 ,处 理 表单 的 脚本 程序 的 位 置 (action)、 提 
交 表 单 的 方法 (method) 等 。 这 些 信息 对 于 浏览 者 是 不 可 见 的 ,但 对 于 处 理 表 单 却 起 着 决 
定性 的 作用 。 

所 form 二 标记 中 包含 的 表单 元 素 通 常 有 一 input 二 一 select 二 和 志 textarea 二 等 ， 
图 6-13 展示 了 DW 的 表单 工具 栏 中 各 种 表单 元 素 与 标记 的 对 应 关系 。 


PP 


对 应 标记 : form input textarea input select input label fieldset 


图 6-13 表单 元 素 和 表单 标记 的 对 应 关系 


在 图 6-13 中 单 击 “ 表 单 " 按 钮 ( 国 ) 后 .就 会 在 网 页 中 插入 一 个 表单 二 form 二 标记 ,此 
时 会 在 “属性 ”面板 中 显示 二 form 二 标记 的 属性 设置 ,如 图 6-14 所 示 。 


| 表单 名 称 EEC I 村 [ti 本 
| am 类 型 [ 习 















图 6-14 < 到 form> 标 记 的 属性 面板 
去 form> 标 记 具 有 的 属性 如 下 。 
1. name 属性 


在 图 6-14 中 ,“ 表 单 名 称 ” 对 应 name 属性 ,可 设置 一 个 唯一 的 名 称 以 标识 该 表单 ,如 
二 form name 王 "forml" 二 ,该 名 称 仅 供 JavaScript 代码 调用 表单 中 的 元 素 。 


2. action 属性 


“动作 ”对 应 表单 的 action 属性 。action 属性 用 来 设置 接收 表单 内 容 的 程序 文件 的 
URL。 例如 ,二 form action 二 "admin/check. php" 二 ,表示 当 用 户 提 交 表 单 后 ,将 转 到 
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admin 目录 下 的 check. php 页 面 ,并 由 check. php 接收 发 送 来 的 表单 数据 ,该 文件 执行 完 
毕 后 (通常 是 对 表单 数据 进行 处 理 ) ,将 返回 执行 结果 (生成 的 静态 页 ) 给 浏览 器 。 

在 “动作 ”文本 框 中 可 输入 相对 URL 或 绝对 URL。 如 果 不 设置 action 属性 ( 即 
action 一 "") ,表单 中 的 数据 将 提交 给 表单 自身 所 在 的 文件 ,这 种 情况 常见 于 将 表单 代码 
和 处 理 表 单 的 程序 写 在 同一 个 动态 网 页 中 ,否则 将 没有 接收 和 处 理 表 单 内 容 的 程序 。 


3. method 属性 


“方法 ?对 应 二 form 之 的 method 属性 ,定义 浏览 器 将 表单 数据 传递 到 服务 器 的 方式 。 
取 值 只 能 是 GET 或 POST( 上 默认 值 是 GET)。 例如: 


<form method= "post"> 


(1) 使 用 GET 方式 时 ,Web 浏览 器 将 各 表单 字段 名 称 及 其 值 按照 URL 参数 格式 的 
形式 , 附 在 action 属性 指定 的 URL 地 址 后 一 起 发 送 给 服务 器 。 例 如 ,一 个 使 用 GET 方 
式 的 form 表单 提交 时 ,在 浏览 器 地 址 栏 中 生成 的 URL 具有 类 似 下 面 的 形式 : 


http://ec.hynu.cn/admin/check.php?name=alice&password=123 


GET 方式 生成 的 URL 格式 为 : 每 个 表单 域 元 素 名 称 与 取 值 之 间 用 等 号 “二 ”分 隔 ， 
形成 一 个 参数 ;各 个 参数 之 间 用 “& ”分隔 ; 而 action 属性 所 指定 的 URL 与 参数 之 间 用 问 
号 “?” 分 隔 。 

(2) 使 用 POST 方式 时 ,浏览 器 将 把 各 表单 域 元 素 名 称 及 其 值 作为 HTTP 消息 的 实 
体内 容 发 送 给 Web 服务 器 ,而 不 是 作为 URL 参数 传递 。 因 此 ,使 用 POST 方式 传送 的 
数据 不 会 显示 在 地 址 栏 中 。 

提示 : 不 要 使 用 GET 方式 发 送 大 数据 量 的 表单 (例如 ,表单 中 有 文件 上 传 域 时 )。 因 
为 URL 长 度 最 多 只 能 有 8192 个 字符 ,如 果 发 送 的 数据 量 太 大 ,数据 将 被 截断 ,从 而 导致 
发 送 的 数据 不 完整 。 另 外 ,在 发 送 机 密 信息 时 (如 用 户 名 和 口令 、 信 用 卡号 等 ) ,不 要 使 用 
GET 方式 ;否则 ,浏览 者 输入 的 口令 将 作为 URL 显示 在 地 址 栏 上 ,而 且 还 将 保存 在 浏览 
器 的 历史 记录 文件 和 服务 器 的 日 志文 件 中 。 因 此 ,GET 方式 不 适合 于 发 送 有 机 密 性 要 求 
的 数据 和 发 送 大 数据 量 数据 的 场合 。 


4. enctype 属性 


“MIME 类 型 ”对 应 二 form 记 的 enctype 属性 ,用 来 指定 表单 数据 在 发 送 到 服务 器 之 
前 应 该 如 何 编码 。 默 认 值 为 “application/x-www-form-urlencode”, 表 示 表 单 中 的 数据 被 
编码 成 “名 三 值 ? 对 的 形式 ,因此 在 一 般 情况 下 无 须 设 置 该 属性 。 但 如 果 表 单 中 含有 文件 
上 传 域 , 则 需 设 置 该 属性 为 “multipart/form-data” ,并 设置 提交 方式 为 POST。 


5. target 属性 


“目标 ?对 应 过 form> 的 “target? 属 性 , 它 指 当 提交 表单 时 ,action 属性 所 指定 的 网 页 
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以 何 种 方式 打开 (在 新 窗口 还 是 原 窗口 )。 取 值 有 4 种 ,含义 和 < 一 a> 标 记 的 target 属性 相 
同 ( 见 表 2-6) 。 


6.3.2 二 input 盖 标记 


去 input 盖 标记 是 用 来 收集 用 户 输入 信息 的 标记 , 它 是 一 个 单 标记 ,< 过 input 二 至 少 应 
具有 两 个 属性 : 一 是 type 属性 ,用 来 决定 这 个 二 input 标 记 的 含义 ,type 属性 共有 10 种 
取 值 ,各 种 取 值 的 含义 如 表 6-3 所 示 ; 二 是 name 属性 ,用 来 定义 该 表单 元 素 的 名 称 , 如 果 
没有 该 属性 ,虽然 不 会 影响 表单 的 界面 ,但 服务 器 将 无 法 获取 该 表单 元 素 提 交 的 数据 。 


表 6-3 ”二 input 标记 的 type 属性 取 值 含义 





type 属性 值 含义 type 属性 值 含义 type 属性 值 含 义 
text 文本 框 submit 提交 按钮 file 文件 域 
password 密码 框 reset 重 置 按钮 hidden 隐藏 域 
radio 单 选 框 button 普通 按钮 


checkbox 复 选 框 image 图 像 按钮 





1. 单行 文本 框 


当 二 input 过 的 type 属性 为 text 时 , 即 : 一 input type 一 "text"… 二 ,将 在 表单 中 创建 
一 个 单行 文本 框 , 如 图 6-15 所 示 。 文 本 框 用 来 收集 用 户 输入 的 少量 文本 信息 。 例 如 : 


姓名 :<input type="text" name="user" size="20"> 


表示 该 单行 文本 框 的 宽度 为 20 个 字符 .名 称 属性 为 user。 

如 果 用 户 在 该 文本 框 中 输入 了 内 容 ( 假 设 输入 的 是 Tom) ,那么 提交 表单 时 ,提交 给 
服务 器 的 数据 就 是 “user 二 Tom”。 即 表单 提交 的 数据 总 是 “name 二 value” 对 的 形式 。 由 
于 name 属性 值 为 user. 而 文本 框 的 value 属性 值 为 文本 框 中 的 内 容 ,因此 有 以 上 结果 。 
如 果 用 户 没有 在 该 文本 框 中 输入 内 容 ,那么 提交 表单 时 ,提交 给 服务 器 的 数据 就 是 
“user 一 ”。 

如 果 文本 框 没有 设置 value 属性 , 则 打开 网 页 时 文本 框 是 空 的 ,如 果 设 置 了 value 属 
性 , 则 value 属性 值 将 作为 文本 框 的 初始 内 容 显 示 。 如 果 和 希望 单 击 文本 框 时 清空 文本 框 
中 的 值 (图 6-15) ,可 对 onfocus 事件 编写 JavaScript 代码 ( 单 击 文本 框 时 会 触发 onfocus 
事件 )。 示 例 代码 (6-13. htmD 如 下 。 文 本 框 和 密码 框 的 常用 属性 如 表 6-4 所 示 。 


查询 < input type= "text" name= "search" value= "请 输入 关键 字 " onfocus= "this.value= 


n> 





查询 隔 寅 入 关键 持 查询 
图 6-15 设置 了 value 属性 值 的 文本 框 在 网 页 载 人 时 ( 左 ) 和 单 击 后 ( 右 ) 
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表 6-4 文本 框 和 密码 框 的 常用 属性 




















属 性 名 功 能 示 例 
表示 文本 框 中 的 内 容 , 如 不 设置 , 则 文本 框 显示 的 内 容 二 " 
lid 为 空 。 用 户 输入 的 内 容 将 会 作为 value 属性 的 最 终 值 ”| valwe 一 请 在 此 输入 
size 指定 文本 框 的 宽度 ,以 字符 个 数 为 度量 单位 size 一 "16” 
maxlength 设置 用 户 能 够 输入 的 最 多 字符 个 数 maxlength= "11" 
el 文本 框 为 只 读 ,用 户 不 能 改变 文本 框 中 的 值 ,但 用 户 仍 i 
能 选中 或 复制 其 文本 ,其 内 容 也 会 发 送 给 服务 器 
disabled 区 人 2 人 次 疾 轴 | 











提示 : readonly 可 防止 用 户 对 值 进行 修改 ,直到 满足 某 些 条 件 为 止 (比如 选中 了 一 个 
复 选 框 ), 此 时 需要 使 用 JavaScript 清除 readonly 属性 。disabled 可 应 用 于 所 有 表单 
元 素 。 

2. 密码 框 

当 一 input 二 的 type 属性 为 password 时 ,表示 该 二 input 二 是 一 个 密码 框 。 密 码 框 和 
文本 框 基本 相同 ,只 是 用 户 输入 的 字符 会 以 圆 点 显示 ,以 防 被 他 人 看 到 。 但 表单 发 送 数据 
时 仍然 会 把 用 户 输入 的 真实 字符 作为 其 value 值 以 不 加 密 的 形式 发 送 给 服务 器 。 示 例 代 
人 码 如 下 ,显示 效果 如 图 6-16 所 示 。 


密码 : <input type="password" name="pw" size="15"> 


图 6-16 ”密码 框 


3. 单 选 按钮 


二 input type 一 "radio" 之 表示 一 个 单 选 按钮 。 单 选 按钮 必须 成 组 出 现 。 将 多 个 单 选 
按钮 的 name 属性 值 设置 为 相同 ,它们 就 会 形成 一 组 单 选 按钮 。 一 组 单 选 按钮 中 只 允许 
一 个 被 选中 。 当 用 户 提交 表单 时 ,在 一 组 单 选 按钮 中 ,只 有 被 选中 的 那个 单 选 按钮 的 名 称 
和 值 ( 即 name/value 对 ) 才 会 被 发 送 到 服务 器 。 

因此 同 组 的 每 个 单 选 按 钮 的 value 属性 值 不 能 相同 ,这 样 选中 不 同 的 单 选项 ,就 能 发 
送 同一 name 值 ,不 同 value 值 。 下 面 是 一 组 单 选 按钮 的 代码 ,效果 如 图 6-17 所 示 。 


性 别 : 男 <input type= "radion name="sex" value= "1l" checked> 


女 <input type= "radion name= "sexn value= "2"> 


其 中 ,checked 属性 设 定 初始 时 单 选 按钮 哪 项 处 于 选 定 状态 ,不 设 定 表示 都 不 选中 。 





209| 














《HTML5+CSS3 Web 前 端 开 发 》 





性 别 ， 男 @ 女 
图 6-17 单 选 按钮 











4. 复 选 框 

< 一 input type 一 "checkbox" 过 表示 一 个 复 选 框 。 将 多 个 复 选 框 的 name 属性 值 设置 为 
相同 ,它们 就 会 形成 一 组 复 选 框 。 一 组 复 选 框 允 许多 个 被 选中 。 提 交 表 单 时 ,在 一 组 复 选 
框 中 ,只 有 被 选中 的 那些 复 选 框 的 值 (形式 为 name/valuel,value2,value3…) 才 会 被 发 送 
到 服务 器 。 

复 选 框 和 单 选 按 钮 部 具有 checked 属性 ,用 来 设置 初始 状态 时 是 否 被 选中 。 下 面 是 
一 个 复 选 框 的 例子 ,其 显示 效果 如 图 6-18 所 示 。 


爱好 :<input name="favl" type="checkbox" value="l" /> 跳舞 
<input name="fav2" type="checkbox" value="2" /> 散步 
<input name="fav3" type="checkbox" value="3" /> 唱歌 


爱好 ， 口 跳舞 口 散步 口 唱歌 


图 6-18 复 选 杠 


提示 : 从 以 上 示例 可 看 出 ,选择 类 表单 标记 ( 单 选 按钮 、 复 选 框 或 下 拉 列 表 框 等 ) 和 给 
入 类 表单 标记 (文本 域 、 密 码 域 、 多 行文 本 域 等 ) 的 重要 区 别 是 : 选择 类 标记 必须 事先 设 定 
每 个 元 素 的 value 属性 值 ,而 输入 类 标记 的 value 属性 值 一 般 由 用 户 输入 ,可 以 不 设 定 。 


5. 文件 上 传 域 


去 input type 一 "file" 盖 是 文件 上 传 域 ,用 于 浏览 器 通过 表单 向 服务 器 上 传 文件 。 使 
用 一 input type 一 "file" 盖 元 素 , 浏 览 器 会 自动 生成 一 个 文本 框 和 一 个 “浏览 "按钮 ,供用 户 
选择 上 传 到 服务 器 的 文件 ,示例 代码 如 下 ,效果 如 图 6-19 所 示 。 


<input type= "file" name="upfile"> 


ml 
图 6-19 文件 上 传 域 


注意 : 如 果 二 form 记 标记 中 含有 文件 上 传 域 , 则 二 form 二 标记 的 enctype 属性 必须 
设置 为 “multipart/form-data”, 并 且 method 属性 必须 是 post。 


6. 隐藏 域 


过 input type 一 "hidden" 过 是 表单 的 隐藏 域 ,隐藏 域 不 会 显示 在 网 页 中 ,但 是 当 提交 
表单 时 ,浏览 器 会 将 这 个 隐藏 域 元 素 的 name/value 属性 值 对 发 送 给 服务 器 。 因 此 隐藏 域 
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必须 具有 name 属性 和 value 属性 ,否则 毫 无 作用 。 例 如 : 


<input type= "hidden" name= "user" value="Alice"> 


隐藏 域 是 网 页 之 间 传 递 信息 的 一 种 方法 。 例 如 ,假设 网 站 的 用 户 注 册 过 程 由 两 个 步 
又 完成 ,每 个 步骤 对 应 一 个 网 页 文件 。 用 户 在 第 一 步 的 表单 中 输入 了 用 户 名 ,接着 进入 第 
二 步 的 网 页 中 ,在 这 个 网 页 中 填写 爱好 和 特长 等 信息 。 在 第 二 个 网 页 提交 时 ,要 将 第 一 个 
网 页 中 收集 到 的 用 户 名 也 传送 给 服务 器 ,就 需要 在 第 二 个 网 页 的 表单 中 加 入 一 个 隐藏 域 ， 
让 它 的 value 值 等 于 接收 到 的 用 户 名 。 





6.3.3 一 select 二 和 一 option 过 标记 


三 select 记 标记 表示 下 拉 框 或 列表 框 ,是 一 个 标记 的 含义 由 其 size 属性 决定 的 元 素 。 
如 果 该 标记 没有 size 属性 ,就 表示 下 拉 列 表 框 ;如 果 有 size 属性 , 则 变 成 了 列表 框 ,列表 的 
行 数 由 size 属性 值 决定 。 如 果 再 设置 了 multiple 属性 , 则 表示 列表 框 允许 多 选 。 

下 拉 列 表 框 中 的 每 一 项 由 过 option 之 标记 定义 ,还 可 使 用 过 optgroup 二 标记 添加 一 
个 不 可 选中 的 选项 ,用 于 给 选项 进行 分 组 。 例 如 下 面 代码 的 显示 效果 如 图 6-20 所 示 。 


所 在 地 : <select name= "addr"> <!-- 添 加 属性 size="5" 则 为 列表 框 --> 
<option value="1"> 湖 南 < /option>… 
<option value="4"> 四 川 </option></select> 





图 6-20 下 拉 列 表 框 ( 左 ) 和 列表 框 ( 右 ) 


提交 表单 时 ,二 select 二 标记 的 name 值 将 与 选中 项 的 value 值 一 起 作为 name/value 
信息 对 传送 给 服务 器 。 如 果 志 option 之 标记 没有 设置 value 属性 ,那么 提交 表单 时 ,将 把 
选中 项 中 的 文本 (例如 “湖南 ”) 作 为 value 部 分 发 送 给 服务 器 。 


6.3.4 多 行文 本 域 标记 二 textarea 二 


< 到 textarea 二 是 多 行文 本 域 标记 ,用 于 让 浏览 者 输入 多 行文 本 ,如 发 表 评论 或 留言 等 。 
< 到 textarea 二 是 一 个 双 标记 , 它 没有 value 属性 ,而 是 将 标记 中 的 内 容 显示 在 多 行文 本 框 
中 ,提交 表单 时 也 是 将 多 行文 本 框 中 的 内 容 作 为 value 值 提交 。 例 如 : 


<textarea name="comments" cols="40" rows="4" wrap="virtual"> 表 示 是 一 个 有 4 行 ,每 


行 可 容纳 40 个 字符 ,换行 方式 为 虚拟 换行 的 多 行文 本 域 。< /textarea> 
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< 一 textarea 二 的 属性 有 : 

(1) cols 一 一 用 来 设置 文本 域 的 宽度 ,单位 是 字符 。 

(2) rows 一 一 用 来 设置 文本 域 的 高 度 ( 行 数 ) 。 

(3) wrap 一 一 设置 多 行文 本 的 换行 方式 ,默认 值 为 virtual, 其 取 值 有 3 种 ,含义 如 下 ; 


。， 关 (off) : 不 让 文本 换行 。 当 用 户 输入 的 内 容 超 过 文本 区 域 的 右边 界 时 ,文本 将 应 
左 侧 深 动 ,不 会 换行 。 用户 必 须 按 回 车 键 才能 将 插入 点 移动 到 文本 区 域 的 下 
= 
虚拟 (virtual) : 表示 在 文本 区 域 中 设置 自动 换行 。 当 用 户 输入 的 内 容 超过 文本 区 
域 的 右边 界 时 ,文本 换行 到 下 一 行 。 当 提交 数据 进行 处 理 时 ,换行 符 并 不 会 添加 
到 数据 中 。 

实体 (physical) : 文本 在 文本 域 中 也 会 自动 换行 ,但 是 当 提交 数据 进行 处 理 时 ,会 
把 这 些 自 动 换行 符 转换 为 二 br/ 二 标记 添加 到 数据 中 。 





6.3.5 表单 数据 的 传递 过 程 


1. 表单 向 服务 器 提交 的 信息 内 容 
当 单 击 表单 的 “提交 ”按钮 后 ,表单 将 向 服务 器 发 送 表 单 中 填写 的 信息 ,发 送 形式 是 各 


个 表单 元 素 的 “name 二 value && name 一 value & name 一 value…”。 下 面 以 图 6-21 中 的 表 
单 为 例 来 分 析 表 单 向 服务 器 提交 的 内 容 ( 输 入 的 密码 是 123) ,该 表单 的 代码 (6-14. html) 
如 下 。 
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<form action="login.php" method= "post"> 
<p> 用 户 名 :<input name= "user" id= "xm" type= "text" size="15" /></p> 
<p> 密 码 : <input name="pw" type="password" size="15" /></p> 
<p> 性 别 : 男 <input type="radio" name="sex" value="]" /> 
女 <input type="radio" name="sex" value="2" /></p> 
<p> 爱 好 :<input name= "favl" type= "checkbox" value= "1" /> 跳舞 
<input name= "fav2" type="checkbox" value= "2" /> 散步 
<input name="fav3" type= "checkbox" value= "3" /> 唱歌 </p> 
<p> 所 在 地 :<select name= "addr"> 
<option value="1"> 长 沙 </option> 
<option value="2"> 湘 潭 < /option> 
<option value="3"> 衡 阳 < /option> 
</select></p> 
<p> 个 性 签名 : <br/><textarea name="sign"></textarea></p> 
<p><input type= "submit" name= "Submit" value= "提交 " />< /p> 
</form> 


表单 向 服务 器 提交 的 内 容 总 是 name/value 信息 对 ,对 于 文本 类 输入 框 来 说 ,value 值 
户 在 文本 框 中 输入 的 字符 。 对 于 选择 框 ( 单 选 按钮 、 复 选 框 和 列表 菜单 ) 来 说 ,value 
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用 户 名 : Feang 

室 码 :J 

性 别 男女 CO 

爱好 口 跳舞 区 散步 区 唱歌 
所 在 地 : | 衡阳 本 

个 性 签名 ， 


加 2 








E33 
图 6-21 一 个 输入 了 数据 的 表单 


的 值 必须 事先 设 定 , 只 有 某 个 选项 被 选中 后 它 的 value 值 才 会 提交 。 因 此 图 6-21 提交 的 
数据 是 : 


user=tang&pw=123&sex=1&fav2=2g&fav3=3&addr=3&sign=wo&Submit= 提 交 


提示 : 

(1) 如 果 表 单 只 有 一 个 提交 按钮 , 则 可 去 掉 它 的 name 属性 (如 name 王 "Submit") , 防 
止 提 交 按 钮 的 name/value 属性 对 也 一 起 发 送 给 服务 器 ,因为 这 些 是 多 余 的 。 

(2) 二 form 记 标记 的 name 属性 通常 是 为 JavaScript 调用 该 form 元 素 提供 方便 的 ， 
没有 其 他 用 途 。 如 果 没 有 JavaScript 调用 该 form, 则 可 省 略 其 name 属性 。 


2. 表单 的 三 要 素 


一 个 最 简单 的 表单 必须 具有 以 下 3 部 分 内 容 : 
(1) 过 form 二 标记 ,没有 它 表单 中 的 数据 不 知道 提交 到 哪里 去 ,并 且 不 能 确定 这 个 表 
单 的 范围 ， 
(2) 至 少 有 一 个 输入 域 (如 input 文本 域 或 选择 框 等 ) ,这 样 才能 收集 到 用 户 的 信息 ， 
否则 没有 信息 提交 给 服务 器 ; 
(3) 提交 按钮 ,没有 它 表单 中 的 信息 无 法 提交 。( 当 然 ,如 果 使 用 Ajax 等 高 级 技术 提 
交 表单 ,表单 也 可 以 不 具有 第 (1) 项 和 第 (3) 项 ,但 本 书 不 讨论 这 些 )。 
可 以 查看 百度 首页 中 表单 的 源 代码 ,这 算是 一 个 最 简单 的 表单 了 , 它 的 源 代码 如 下 ， 
可 见 它 具 有 上 述 的 表单 三 要 素 , 因 此 是 一 个 完整 的 表单 。 
<form name=f action= s> 
<input type= text name=wd id=kw size=42 maxlength=100> 
<input type= submit value= 百 度 一 下 id= sb>… 
</form> 


6.3.6 表单 中 的 按钮 


去 input 盖 标记 可 创建 4 种 类 型 的 按钮 , 当 它 的 type 属性 为 submit 时 表示 提交 按钮 ; 
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type 属性 为 image 时 表示 图 像 按 钮 .这 两 种 按钮 都 具有 提交 表单 的 功能 ; type 属性 为 
reset 则 是 一 个 重 置 按钮 ,type 属性 为 button 时 表示 普通 按钮 ,这 种 按钮 需要 编写 
JavaScript 脚本 使 其 具有 相应 的 功能 ,如 表 6-5 所 示 。 

表 6-5 用 一 input 一 标记 创建 按钮 时 的 type 属性 类 型 设置 


type 属性 类 型 功 能 作 用 
过 input type 一 "submit" /> | 提交 按钮 提交 表单 信息 
<input type="image" /> 图 像 按钮 用 图 像 做 的 提交 按钮 ,也 用 于 提交 表单 信息 
<input type= "reset" /> 重 置 按钮 将 表单 中 的 用 户 输入 全 部 清空 
<input type= "button" /> 普通 按钮 需要 配合 JavaScript 脚本 使 其 具有 相应 的 功能 

















但 是 ,二 input type 二 "submit" /二 标记 创建 的 按钮 默认 效果 是 没有 图 片 的 ,而 图 像 
按钮 虽然 有 图 像 但 是 不 能 添加 文字 。 实 际 上 ,在 HTML 中 有 个 二 button 二 标记 , 它 可 以 
创建 既 带 有 图 片 又 有 文字 的 按钮 ,效果 如 图 6-22 所 示 。 


ul (QEn) Bas 
图 6-22 普通 提交 按钮 .图 像 按钮 与 button 标记 创建 的 提交 按钮 比较 
使 用 二 button 二 标记 创建 按钮 时 的 代码 如 下 : 


<button type="submit"><img src="check.png" align= "absmiddle"/> 登 录 < /button> 


当然 ,还 有 一 种 思路 是 用 二 a 二 标记 来 模拟 按钮 ,但 那样 就 需要 CSS 和 JavaScript 的 
配合 。 通 过 CSS 使 a 元 素 具有 边框 ,再 添加 JavaScript 脚本 使 其 具有 提交 表单 的 功能 。 


6.3.7 表单 的 辅助 标记 


1. 二 label 一 标记 


三 label 二 标记 用 来 为 控件 定义 一 个 标签 , 它 通 过 for 属性 绑 定 控件 。 如 果 表 单 控件 
的 id 属性 值 和 二 label 二 标记 的 for 属性 值 相同 ,那么 二 label 二 标记 就 会 和 表单 控件 关联 
起 来 。 通 过 在 DW 中 插入 表单 控件 时 选择 “使 用 for 属性 附加 标签 标记 ”可 快捷 地 插入 
二 label 二 标记 。 示 例 代 码 (6-15. html) 如 下 : 


<input type= "radio" name="sex" value="radiobutton" id="male" /> 
<label for="male"> 男 </label><br /> 

<input type= "radio" name="sex" value="radiobutton" id="female" /> 
<label for="female"> 女 </label> 


添加 了 带 有 for 属性 的 二 label 二 标记 后 , 单 击 label 标签 就 相当 于 单 击 表单 控件 了 。 
2. 字段 集 标 记 一 fieldset> 、 一 legend 一 


到 fieldset> 是 字段 集 标记 , 它 必 须 包 含 一 个 二 legend> 标 记 , 表 示 是 字段 集 的 标题 。 
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如 果 表 单 中 的 控件 较 多 ,可 以 将 逻辑 上 是 一 组 的 控件 放 在 一 个 字段 集 内 ,显得 有 条 理 些 。 
6.3.8 HTMLS 新 增 的 表单 标记 和 属性 

HTML5 在 表单 方面 作 了 很 大 的 改进 ,包括 : 使 用 type 属性 增强 表单 ,表单 元 素 可 以 
出 现在 一 form> 标 记 之 外 ,input 元 素 新 增 了 很 多 可 用 属性 等 。 

1. 一 input 一 标记 的 新 增 类 型 值 


在 HTML5 中 ,一 input 盖 标记 在 原 有 类 型 (type 属性 值 ) 的 基础 上 ,新 增 了 许多 新 的 
类 型 成 员 ,如 表 6-6 所 示 。 


表 6-6 ”一 input 一 标记 新 增 的 类 型 





类 型 名 称 type 属性 功能 描述 
网 址 输入 框 <input type= "url"> 用 来 输入 网 址 的 文本 框 
E-mail 输入 框 <input type= "email"> 用 来 输入 E-mail 地 址 的 文本 框 
数字 输入 框 <input type= "number"> 输入 数字 的 文本 框 ,并 可 设置 输入 值 的 范围 
范围 滑动 条 <input type= "range"> 可 拖 动 滑动 条 ,用 于 改变 一 定 范围 内 的 数字 
日 期 选择 框 <input type 一 "date "一 可 选择 日 期 的 文本 框 
搜索 输入 框 <input type= "search"> 输入 搜索 关键 字 的 文本 框 





其 中 ,网 址 输入 框 与 E-mail 输入 框 虽然 从 外 观 上 看 与 普通 文本 框 相 同 , 但 是 它 会 检 
测 用 户 输入 的 文本 是 否 是 一 个 合法 的 网 址 或 E-mail 地 址 ,从 而 不 需要 再 使 用 JavaScript 
脚本 来 验证 用 户 输入 内 容 的 有 效 性 。 

数字 输入 框 示例 代码 (6-16. html) 如 下 ,在 Chrome 浏览 器 中 的 外 观 如 图 6-23( 左 ) 
所 示 。 


<input type= "number" min="1960" max= "1990" step="1" value="1980" /> 





相对 于 普通 文本 框 ,数字 文本 框 会 检验 输入 的 内 容 是 否 为 数字 ,并 且 可 以 设置 数字 的 
最 小 值 (min) 、 最 大 值 (max) 和 步 进 值 (step)。 当 单 击 数字 输入 框 右 侧 的 上 下 箭头 时 ,就 
会 递增 或 递减 当前 值 。 

范围 滑动 条 的 示例 代码 如 下 ,在 Chrome 浏览 器 中 的 外 观 如 图 6-23( 中 ) 所 示 。 


0< input type= "ange" min= "0" max="20" value= "10" />20 


搜索 输入 框 专门 用 于 关键 字 查询 ,该 类 型 输入 框 和 普通 文本 框 在 功能 和 外 观 上 没有 
太 大 区 别 , 唯 一 区 别 是 : 当 用 户 在 输入 框 中 填写 内 容 时 ,输入 框 右 侧 将 会 出 现 “X "按钮 ， 
单 击 该 按钮 ,就 会 清空 输入 框 中 内 容 。 示 例 代码 如 下 ,运行 结果 如 图 6-23( 右 ) 所 示 。 


<input name= "keyword" type="search" /> 


日 期 选择 框 的 示例 代码 如 下 ,在 Chrome 浏览 器 中 的 外 观 如 图 6-24 所 示 。 
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1 到 0 由 20 
图 6-23 ”数字 输入 框 ( 左 ) ,范围 滑动 条 (中 ) 和 搜索 输入 框 ( 右 ) 的 效果 


<input name="birth" type="date" value="2013- 06-10" /> 


2013- 栈 -10 x$v 


2013 年 11 月 ~ | 


星期 星期 星期 星期 星期 星期 星期 
召 加 到 四 五 发 
3 4 5 6 7Y 8 9 
10 11 12 13 14 15 1 
17 18 19 20 21 2 23 
24 25 26 27 28 29 30 


图 6-24 日 期 选择 框 


可 见 , 日 期 选择 框 能 够 弹出 日 期 界面 供用 户 选 择 , 如 果 对 其 设置 value 属性 , 则 会 显 
示 该 属性 中 的 值 作为 默认 日 期 。type 属性 除了 date 外 ,将 type 属性 设置 为 time、month、 
week、datetime、datetime-local 均 表示 日 期 选择 框 ,只 不 过 此 时 能 选择 时 间 、 月 份 、 星 期 
等 值 。 

提示 : 如 果 浏 览 器 不 支持 这 些 HTML5 中 的 type 属性 值 , 则 会 取 type 属性 的 默认 值 
text, 从 而 将 input 元 素 解释 为 文本 框 。 


2. 一 input 一 标记 新 增 的 公共 属性 


在 HTML5 中 ,二 input 志 标记 新 增 了 很 多 公共 属性 ,如 表 6-7 所 示 。 除 此 之 外 ,还 新 
增 了 一 些 特有 属性 ,如 range 类 型 中 的 min、max、step 等 。 


表 6-7 去 input 标记 新 增 的 公共 属性 








属 性 HTML 代码 功能 说 明 
autofocus <input autofocus= "true"> 设置 元 素 自动 获得 焦点 
pattern 二 input pattern 一 "正则 表达 式 "二 使 用 正则 表达 式 验证 input 元 素 的 内 容 
placeholder 二 input placeholder 二 "请 输入 "二 设置 文本 输入 框 中 的 默认 内 容 
required < 一 input required= "true"> 是 否 检测 文本 输入 框 中 的 内 容 为 空 
novalidate 二 input novalidate= "true"> 是 否 验 证 文本 输入 框 中 的 内 容 
autocomplete <input autocomplete= "on"> 使 form 或 input 具 有 自动 完成 功能 








二 input 之 标记 这 些 公共 属性 的 含义 如 下 : 

(1) autofocus 属性 一 一 当 input 元 素 具 有 autofocus 属性 时 ,会 使 页 面 加 载 完 成 后 ， 
该 元 素 自 动 获 得 焦点 ( 即 光标 位 于 该 输入 框 内 ) 。 

(2) pattern 属性 一 一 对 于 比较 复杂 的 规则 验证 ,如 验证 用 户 名 “是 否 以 字母 开头 , 包 
含 字符 或 数字 和 下 画 线 ,长 度 为 6 一 8”。 则 需要 使 用 pattern 属性 设置 正则 表达 式 验 证 ， 
例如 ,pattern 一 "[a-zA-Z]\w(5.,7)$"。 
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(3) placeholder 属性 一 一 该 属性 可 在 文本 框 中 放置 一 些 提示 文本 (以 灰色 显示 ) , 当 
输入 文本 时 ,提示 文本 消失 。 示 例 代码 如 下 ,其 效果 类 似 于 图 6-15。 


<input name= "keyword" type= "search" placeholder= "请 输入 关键 字 " /> 


(4) required 属性 一 一 该 属性 用 来 验证 输入 框 的 内 容 是 否 为 空 ,如 果 为 空 ,在 表单 提 
交 时 ,会 显示 错误 提示 信息 。 

(5) novalidate 属性 一 一 该 属性 表示 提交 表单 时 不 验证 表单 或 输入 框 的 内 容 ,该 属性 
适用 于 : 二 form 二 以 及 以 下 类 型 的 二 input 二 标记 : text、 search、url, telephone、email、 
password date pickers \range 以 及 color。 

(6) autocomplete 属性 一 一 该 属性 用 来 设置 表单 或 输入 框 是 否 具有 自动 完成 功能 ， 
其 属性 值 是 on 或 off。 开 启 自动 完成 功能 后 , 当 用 户 成 功 提交 一 次 表单 后 ,以 后 每 次 再 提 
交 表单 时 ,都 会 在 输入 框 下 方 出 现 以 前 输入 过 的 内 容 供 用 户 选择 。 

这 些 属性 的 功能 过 去 一 般 是 用 JavaScript 脚本 实现 ,而 用 HTML5 属性 实现 后 ,可 以 
大 大 减少 对 JavaScript 代码 的 使 用 。 

















3. 新 增 的 表单 元 素 


在 HTML5 中 , 除 新 增 了 去 input 之 标记 的 类 型 外 ,还 新 增 了 许多 新 的 表单 元 素 , 如 
datalist output .keygen 等 。 这 些 元 素 的 加 入 , 极 大 地 丰富 了 表单 数据 的 操作 ,优化 了 用 
户 体验 。 

1) datalist 元 素 

去 datalist 之 标记 的 功能 是 辅助 表单 中 文本 框 的 数据 
输入 。datalist 元 素 本 身 是 隐藏 的 , 它 需 要 与 文本 框 的 list 
属性 绑 定 ,只 要 将 list 属性 值 设 置 为 datalist 元 素 的 ID 属 医生 
性 即 可 。 绑 定 成 功 后 ,用 户 在 文本 框 输入 内 容 时 ,datalist 
元 素 将 以 列表 的 形式 显示 在 文本 框 底部 ,提示 输入 的 内 ”图 6-25 datalist 元 素 示例 
容 , 与 自动 完成 的 功能 类 似 。 示 例 代码 (6-17. html) 如 下 ， 
运行 效果 如 图 6-25 所 示 。 














<input type= "text" id="zhiye" list="career" /> 

<datalist id="career"> 
<option value=" 工 人 ">< /option><option value=" 医 生 "></option> 
<option value= "公务 员 ">< /option> 

</datalist> 


2) output 元 素 

output 元 素 的 功能 是 在 页 面 中 显示 各 种 不 同类 型 表单 元 素 的 内 容 或 运算 后 的 结果 ， 
如 输入 框 的 值 。output 元 素 需 要 配合 onFormInput 事件 使 用 ,在 表单 输入 框 中 输入 内 容 
时 ,将 触发 该 事件 ,从 而 可 方便 地 获取 到 表单 中 各 个 元 素 的 输入 内 容 。 下 面 是 一 个 例子 
(6-18. html) , 当 改 变 表 单 中 两 个 文本 框 的 值 时 ,output 元 素 的 值 也 随 之 改变 ,效果 如 
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图 6-26 所 示 。 


<form oninput="x.value=parseInt (a.value)+parseInt (b-value) "> 
0< input type= "rangen id="a" value="50">100 
+<input type= "number" id="b" value="50"> 
=<output name="x" for="a b"></output> 


</form> 


0 目 100 #60 | =89 


图 6-26 ”outpnut 元 素 示例 


3) keygen 元 素 

keygen 元 素 用 于 生成 页 面 的 密 钥 。 如 果 在 表单 中 添加 该 元 素 , 那 么 当 表单 提交 时 ， 
该 元 素 将 生成 一 对 密 钥 : 一 个 称 为 私 钥 , 将 保存 在 客户 端 ; 另 一 个 称 为 公 钥 ,将 发 送 给 服 
务 器 ,由 服务 器 进行 保存 , 公 钥 可 用 于 客户 端 证 书 的 验证 。 

在 表单 中 ,插入 一 个 name 值 为 userinfor 的 keygen 元 素 ,代码 如 下 : 


<keygen name= "userinfor" keytype="rsa" /> 


则 会 在 页 面 中 显示 一 个 如 图 6-27 所 示 的 选择 密 钥 位 数 的 下 拉 列 表 框 ,当选 择 列表 框 中 的 
密 钥 长 度 值 后 ,提交 表单 ,将 根据 所 选择 的 密 钥 位 数 生成 一 对 公私 钥 ,并 将 公 钥 发 送 给 服 
务 器 。 


1024【〔 中 等 强度 ) 


1024 (中 等 强度 ) 


图 6-27 ”keygen 元 素 示例 
目前 ,只 有 Chrome 、Firefox 和 Opera 浏览 器 支持 该 元 素 , 因 此 ,如 果 将 keygen 作为 
客户 端 安全 保护 的 一 种 有 效 措施 ,还 需要 时 间 。 
6.4 美化 表单 


网 页 中 最 常见 的 表单 有 3 种 , 即 搜索 框 \ 用 户 登录 表单 和 用 户 注册 表单 ,这 些 表单 的 
制作 并 不 难 , 关 键 是 对 其 进行 CSS 样式 美化 。 


6.4.1 搜索 框 
搜索 框 是 一 种 很 常见 的 网 页 组 件 , 它 主要 由 一 个 文本 框 和 一 个 提交 按钮 组 成 (有 时 还 


会 带 一 个 搜索 方式 的 下 拉 列 表 框 )。 虽 然 用 HTML 代码 制作 一 个 搜索 框 很 容易 ,但 要 对 
搜索 框 进行 美化 却 有 一 定 的 难度 。 本 节 将 介绍 制作 如 图 6-28 所 示 的 搜索 框 。 
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输入 搜索 关键 字 Q 
图 6-28 搜索 杠 


该 搜索 框 的 界面 由 3 个 元 素 组 成 ,左边 是 一 个 文本 框 (input 元 素 ) ,右边 是 一 个 提交 
按钮 (input 元 素 ) ,然后 在 这 两 个 元 素 外 包 庄 一 个 div 元 素 。 结 构 代 码 (6-19. html) 如 下 : 


<div class="search"> 

<formaction="" method="post" name="sou"> 
<input class="keyword" name="showkeycode" maxlength="50" value= "输入 搜索 关 
键 字 " onfocus="this.style.color='#999999';if (value ==' 输 入 搜索 关键 字 ') {value 
=''}" onblur="this.style.color='#999999';if (value =='') {value= ' 输 入 搜索 关键 
字 '}" style="color: rgb(153, 153, 153);"> 
<input type="submit" class="btn "> 

</form> 

</div> 


为 了 实现 文本 框 和 提交 按钮 水 平 排列 ,本 例 设置 左边 文本 框 左 浮动 ,右边 的 提交 按钮 
不 浮动 ,然后 设置 外 层 的 div 元 素 内容 右 对 齐 ,使 提交 按钮 移动 到 右边 。 最 后 去 掉 文 本 框 
和 提交 按钮 的 边框 ,再 对 外 层 div 设置 1px 的 边框 和 圆 角 。CSS 代码 如 下 : 


.search{width:230px; height:30px; padding:0; border:1px #ccc solid; 
border- radius:4px; text-align:right; /* 使 搜索 按钮 移 到 右边 * / } 

.keyword{ 

width: 190px; height: 28px; line- height:28px; text- indent: lem; 

border: 0px; background- color:transparent; color: #9b9b9b; float:left; 

} 

.search .btn{ 

width: 34px; height: 30px; margin-right:6px;  ”/* 为 了 不 遮 住 div 右边 的 圆 角 * / 

background: url ("images/searchbtn.gif")no- repeat 0 -2px; 


border: none; cursor:pointer} 


在 图 6-28 中 , 单 击 文本 框 时 ,文本 框 中 的 提示 语 会 消失 ,而 当 文本 框 失去 焦点 ,并 且 
文本 框 中 没有 文字 时 ,又 会 重新 出 现 提示 语 。 这 是 使 用 JavaScript 对 onfocus( 获 得 焦点 ) 
和 onblur( 失 去 焦点 ) 两 个 事件 编程 实现 的 。 


6.4.2 用 户 登 录 表 单 


用 户 登 录 表 单 主要 由 两 个 文本 框 和 一 个 按钮 组 成 。 目 前 ,一 种 比较 流行 的 趋势 是 把 
文本 框 和 登录 按钮 做 得 一 样 宽 , 把 文本 框 的 提示 文字 写 在 文本 框 内 ,而 不 是 文本 框 的 左 
边 。 图 6-29 是 一 个 用 户 登录 表单 。 其 结构 分 为 上 中 下 3 个 div。 结 构 代 码 (6-20. html) 
如 下 : 
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<div class="loginbox"> 
<div class="head"> <!-- 登 录 界 面 头 部 --> 
<a id= "goBack" href="javascript:history.go(-1);" class="left-btn head-btn "> 
返回 < /a> 
<a id="menu" href="javascript:void(0)" class="right-btn head-btn"></a> 
<hl class=""> 会 员 登 录 < /h1> 
</div> 
<div class="1gbody"> <!-- 登 录 界 面 主体 --> 
<form action= "#" class="1istForm" method= "post"> 
<div class="userzone" id="selectBank"> ee 第 一 个 文本 框 本 二 
<span class="username">< /span> 
<span class="fRight"> < input class="opa" name="LoginName" id="name" 
placeholder=" 请 输入 您 的 手机 号 " type="text" value="" /></span> 
</div> 
<div class="pwdzone" style="position: relative;"> 
<!-- 密 码 框 --> 
<span class="password"></span> 
<span class =" fRight" > < input class ="opa" name =" Passwd" id="pass" 
placeholder=" 密 码 (6- 18 位 数字 和 字母 组 合 )" type="password" /></span> 


</div> 
<div class="col div"> <!-- 登 录 按 钮 --> 
<button type= "submit" class= "btn btn-blue" title= "会 员 登 录 "> 登 录 </button> 
</div> 
<div class="1og_ ele clear"> 
<a href="#"> 免 费 注册 < /a> <a href= "#"> 忘 记 密码 < /a> 
</div></form> 
</div> <!--1lgbody--> 
<div class="1gfoot"> <!-- 登 录 界 面 底部 --> 
<!-- 底 部 超 链接 代码 省 略 -一 > 
</div></div> 





图 6-29 用 户 登 录 界面 


第 表格 与 表单 


该 登录 框 头 部 由 中 间 的 文本 和 左右 两 边 的 图 标 组 成 ,分 别 设置 两 个 图 标 左右 浮动 ,再 
设置 head 元 素 内 容 居中 显示 即 可 。 主 体 部 分 先 将 两 个 文本 框 的 边框 去 掉 , 再 设置 外 层 包 
庄 的 div 有 1px 的 边框 ,并 将 上 面 div 的 下 边框 去 掉 ,使 两 个 div 交汇 处 的 边框 也 只 有 1px 
粗 。 设 置 两 个 文本 框 左边 的 span 元 素 有 背景 图 片 。 完 整 的 CSS 代码 如 下 : 





a {color: #2DAl1E7; text— decoration: none; 
font- family: microsoft yahei; font- size: 15px; } 
.loginbox{width:338px;} /* 将 其 改 为 百分比 宽度 将 可 自 适 应 浏览 器 * / 
-head {height: 44px; line-height: 44px; text-align: center; 
background- color: #3cafdc} 
.head hl { /* 头 部 的 文字 * / 
width: 190px; margin: 0 auto;font- family: microsoft yahei; 
font- size: 18px; color: #fff; font-weight: 700} 
-head-btn { /* 头 部 左右 两 边 的 按钮 * / 
width: 21px; height: 20px; margin: 12px 12px 0; 
overflow: hidden; display: inline-block; text- indent:- 9999px;} 
.left-btn{ float:left; background:url (img/icon back.png)no- repeat; 
background- size: llpx 17px;} 
.right-btn{ float:right; 
background:url (img/header-nav.png)no- repeat scroll - 4px 2px transparent;} 
.lgbody{ 
padding: 10px; background- color: #f0f0f0; min-height: 180px;} 
.userzone, .pwdzone { 
padding- left: 10px; padding- right: 10px; height: auto; 
background- color: #fff; line-height: 49px; border: lpx solid #ccc;} 
.userzone{border- bottom:none; /*margin-bottom:— lpx; * /} 
.lgbody span.fRight { 
float: none; padding- left: 12px; overflow: hidden; 
display: block; height: 44px; line-height: 44px;} 
input [type= "text"], input [type="password"] { 
width: 100%; text-align: left; outline: none; box- shadow: none; border: none; 
color: #333; background- color: #fff; height: 44px; margin- left: — 5px; 
font: 15px/1.5 arial,\5b8b\4f53; font- family: microsoft yahei;} 
.username, .password {margin: 8px -5px 0; 
background: url ("img/ico-user.png")no- repeat; 


float:left; width: 30px; height: 28px; background- size: cover; } 


.password { /* 设 置 密码 框 左边 的 图 标 * / 
background: url ("img/ico-password.png")no- repeat;background- size: cover; } 
.btn-blue { 


margin- top: 10px; background: #fe932b; border: none; 


border- radius: 3px; font- family: microsoft yahei; font- size: 18px;} 
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-btn { 

width: 100%; height: 40px; display: block; line-height: 40px; 

text-align: center; font- size: 18px; color: #fff; margin- bottom: 10px;} 
-log ele { padding: 0px 10px; font- size: 15px;} 
"log ele a:last- child {float: right;} 
.lgfoot {background- color: #3cafdc; padding: 7Px 0;} 
-lgfoot . footer link { text - align: center; line - height: 2em; Padding — 
bottom: 5px;} 


6.4.3 用 户 注册 表单 


网 页 中 的 表单 元 素 在 默认 情况 下 背景 都 是 灰色 的 ,文本 框 边框 都 是 粗 线条 带 立 体感 


的 ,不 够 美观 。 下 列 代码 (6-21. html) 通 过 CSS 改变 表单 的 边框 样式 .颜色 和 背景 颜色 让 
文本 框 、 按 钮 等 变 得 漂亮 些 。 效 果 如 图 6-30 所 示 。 该 表单 的 结构 代码 如 下 : 
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<form action= "#" method= "post" enctype= "multipart/form- data"> 
<ul class="felem"> 
<1i> 用 户 名 :<input type= "text" name="comments" size=15 
required placeholder=" 取 个 好 听 的 名 字 咯 ">< /1i> 
<1i> 密 码 :<input name="passwd" type="password" size="15" required></1i> 
<1i> 所 在 地 : <select name= "addr"> 
<option value="1"> 湖 南 </option>…… 
<option value="4"> 四 川 </option></select></1i> 
<1i><span style="vertical-align:top"> 个 性 签名 :< /span> 
<textarea name="sign" cols="20" rows="4" required 
Placeholder= "表达 你 的 个 性 ">< /textarea>< /li> 


<1i><button class="submit" type="submit"> 立 即 注册 < /button></1i> 
</form> 





所 在 地 ，| 湖南 ， 





个 性 签名 ， | 年轻 没 有 失败 








图 6-30 用 户 注册 表单 的 效果 











CSS 样式 主要 是 为 文本 框 添加 了 圆 角 和 阴影 效果 ,并 设置 了 文本 框 和 下 拉 列 表 框 的 
填充 值 , 使 它们 的 边框 和 内 容 有 一 些 空隙 ,这 对 样式 美化 有 很 大 效果 。 然 后 在 文本 框 的 
:focus 伪 类 中 ,设置 了 padding-right 值 ,使 文本 框 获得 焦点 时 能 够 向 右 伸展 宽度 。 完 整 
的 CSS 代码 如 下 : 








ul {list- style: none; margin:0px; padding:0px;} 
form{border: lpx dotted #999; padding: lpx 6px; margin:0px; font:14px Arial;} 
.felem li{padding:12px; border-bottom:1px solid #eee; position:relative;} 
.felem li input { height:20px; width:220px; padding:5px 8px;} 
.felem li select{ font- size:14px; padding:5px 8px;border- radius:3px;} 
.felem li input, .felem 1i textarea { 
background: #fff url (images/attention.png)no- repeat 98%center; 
border:1px solid #aaa; width:200px; 
box- shadow: Opx Opx 3px #ccc, 0 10px 15px #eee inset; 
border- radius:2px; transition: padding .25s;} 
.felem li input:focus, .felem li textarea:focus { /* 当 该 元 素 获得 焦点 时 * / 
background: #fff; border:1px solid #555; 
box- shadow: 0 0 3px #aaa; padding- right:70px;} 
button.submit { 
background- color: #68b12f; margin- left:100px; 
background: linear- gradient (top, #68b12f, #5091le); 
border: lpx solid #509111; border- bottom: lpx solid #5b992b; 
border- radius: 3px; color: white; font-weight: bold; 
box- shadow: inset 0 lpx 0 0 #9fd574; /* 设 置 向 下 1px 的 #9fd574 色 的 内 阴影 * / 
padding: 6px 20px; text-align: center; text- shadow: 0 -lpx 0 #396715;} 
button.submit:hover {opacity:.85; cursor: pointer;} 
button.submit:active {border: lpx solid #2091le; 
box- shadow: 0 0 10px 5px #356b0b inset;} 
.felem 1i input:focus:invalid, .felem li textarea:focus:invalid { 
background: #fff url (images/warn.png)no- repeat 98%center; 
box- shadow: 0 0 5px #d45252; border- color: #b03535} 
.felem li input:required:valid, .felem li textarea:required:valid { 
background: #fff url (images/right .png)no- repeat 98%center; 
box- shadow: 0 0 5px #5cd053; border- color: #28921f;} 





可 见 , 美 化 表单 主要 就 是 重新 定义 表单 元 





的 边框 .填充 和 背景 图 像 等 属性 。 
习 题 


1. 下 列 哪 种 元 素 不 能 够 相互 嵌 套 使 用 ? 〈 ) 


A. table B. form C.dl D. div 
2. 下 述 元 素 中 ( ) 都 是 表格 中 的 元 素 。 
A. <=table><head><th> B. <table><tr><td> 
C. <table><=body><tr> D. =table>=head><footer> 
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3. 下 述 哪 一 项 表示 表单 控件 元 素 中 的 下 拉 列 表 框 元 素 ? ( ) 


A. =select> B. 一 input type= "list"> 

C. <list> D. =input type= "options"> 
4. 在 下 列 的 HTML 中 ,哪个 可 以 产生 复 选 框 ?”( ) 

A. =input type= "check"> B. =checkbox> 

C. 二 input type="checkbox"> D. =check> 


5. 下 列 哪 项 表述 是 不 正确 的 ? ( ) 
A. 单行 文本 框 和 多 行文 本 框 都 是 用 相同 的 HTML 标记 创建 的 
B. 列表 框 和 下 拉 列 表 框 都 是 用 相同 的 HTML 标记 创建 的 
C. 单行 文本 框 和 密码 框 都 是 用 相同 的 HTML 标记 创建 的 
D. 使 用 图 像 按钮 二 input type 一 "image" 也 能 提交 表单 


6. colspan 是 标记 的 属性 ,cellpadding 是 标记 的 属性 ，target 是 
标记 或 标记 的 属性 ,二 input 二 标记 至 少 会 具有 属性 ,二 img 二 

标记 必须 具有 属性 ,如 果 作 为 超 链接 ,二 a 二 标记 必须 具有 属性 。 

7. 要 设置 表单 文本 框 中 的 内 容 不 能 为 空 ,应 该 添加 属性 。 

8. 要 在 表单 文本 框 中 放置 一 些 提示 性 的 文字 , 当 用 户 输入 时 ,这 些 提示 文字 自动 消 
失 ,应 该 使 用 属性 。 

9. 要 选择 偶数 行 的 表格 元 素 ,应 使 用 选择 器 。 

10. placeholder 属性 作用 是 ,required 属性 作用 是 


11. 下 面 的 表单 元 素 代码 都 有 错误 ,请 指出 它们 的 错误 分 别 哪里 ? 
(1) 二 input name= "country" value="Your country here." /> 
(2) <checkbox name= "color" value="teal" /> 
(3) 一 input type= "password" value="pwd" /> 
(4) 一 textarea name= "essay" height="6" width="100"> Your story. < /textarea> 
(5) =select name= "popsicle"> 
< 一 option value= "orange" />=option value= "grape" /这 二 option value= 
"cherry" /> 
</select> 
12. 夯 出 下 面 HTML 代码 对 应 的 表格 : 
<table width="466" height="127"> 


<tr><td></td><td rowspan="2"></td></tr> 
<tr><td></td></tr></table> 


13. 模仿 图 6-12, 设 计 一 个 用 户 注册 的 表单 页 面 。 
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第 7 章 响应 式 网 页 设计 


几 年 前 ,我 们 看 到 的 网 页 还 是 以 固定 宽度 的 居多 ,目的 是 让 所 有 用 户 都 拥有 相同 的 体 
验 , 固 定 宽度 网 页 对 于 笔记 本 屏幕 来 说 可 能 还 算 合适 ,但 在 更 大 显示 器 (如 27 英寸 ) 上 显 
示 时 则 会 在 两 边 出 现 很 大 的 空白 。 

同时 , 随 着 智能 手机 的 普及 ,使 用 手机 、 平 板 电脑 等 设备 上 网 的 用 户 越 来 越 多 ,这 样 一 
来 ,上 网 设备 屏幕 之 间 的 差距 变 得 前 所 未 有 的 大 。 

面 对 不 断 扩展 的 浏览 器 和 设备 ,Ethan Marcotte 于 2010 年 提出 了 “响应 式 网 页 设计 ” 
(Responsive Web Design) 的 理念 。 这 种 理念 就 是 让 一 个 网 站 同时 适 配 多 种 设备 和 多 个 
屏幕 ,让 网 页 的 布局 和 功能 随 着 用 户 的 使 用 环境 (屏幕 大 小 、 浏 览 器 能 力 ) 而 自动 变化 。 


7.1 响应 式 网 页 的 基本 技术 


所 谓 响应 式 网 页 设计 ,就 是 网 页 内 容 会 随 着 访问 它 的 视 口 及 设备 的 不 同 而 呈现 不 同 
的 布局 样式 。 其 实现 原理 是 通过 媒体 查询 ` 流 式 布局 和 自 适 应 图 片 等 技术 来 实现 自动 调 
整 页 面 元 素 布局 。 

响应 式 网 页 设计 不 仅 能 给 用 户 带 来 更 好 的 体验 ,同时 也 能 增加 网 站 的 点 击 率 。 响 应 
式 网 页 设计 的 出 现 , 打 破 了 传统 的 网 页 布局 思路 ,实现 了 一 个 网 站 在 台式 机 、 平 板 电脑 和 
手机 等 各 种 终端 设备 上 浏览 效果 的 流畅 性 。 

总 的 来 说 ,为 了 适应 不 同 大 小 的 屏幕 ,对 于 大 多 数 网 页 来 说 ,使 用 响应 式 布局 可 以 降 
低 开 发 成 本 和 时 间 , 也 便于 维护 。 而 对 于 非常 复杂 的 网 页 ,如 搜狐 、 腾 讯 等 首页 ,采用 的 方 
法 则 是 分 别 开 发 电脑 端 ,手机 端 等 几 种 不 同 终端 的 网 页 。 

响应 式 网 页 的 基本 要 求 是 : 由 于 网 页 元 素 要 能 随 着 屏幕 宽度 的 改变 而 改变 ,因此 大 
部 分 网 页 元 素 的 宽度 都 必须 设置 为 相对 大 小 (如 百分比 ), 只 有 很 小 的 不 影响 布局 的 内 层 
元 素 可 使 用 绝对 大 小 ,并 且 字 体 大 小 也 要 使 用 相对 大 小 (如 em、rem、%) ,不 能 使 用 像素 。 
但 可 变 宽度 布局 并 不 能 解决 响应 式 网 页 的 所 有 问题 ,因为 当 屏 幕 缩放 到 很 窗 时 ,每 列 中 的 
元 素 将 超出 列 的 宽度 ,为 此 ,响应 式 网 页 的 实现 还 需要 依靠 下 列 几 项 技术 。 


7.1.1 媒体 查询 
媒体 查询 (media queries) 技 术 用 来 针对 不 同 的 媒体 类 型 定义 不 同 的 CSS 样式 。 这 样 


就 可 以 针对 不 同 的 屏幕 分 辩 率 编写 不 同 的 CSS 样式 规则 了 。 媒 体 查询 技术 起 源 于 
CSS2. 1 中 的 媒体 类 型 (media type) 技 术 , 例 如: 


<style tyYype= "text/css" media="screen"> 
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css 代码 


</style> 


其 中 media 属性 就 可 用 来 指定 特定 的 媒体 类 型 ,例如 屏幕 (screen) 、 打 印 (print) 或 手持 设 
备 (handheld) 等 。 但 CSS2. 1 中 的 媒体 类 型 只 支持 设备 类 型 ,其 实用 性 并 不 强 ,因此 很 少 
被 使 用 。CSS3 的 媒体 查询 是 对 媒体 类 型 的 扩充 与 增强 ,CSS3 的 媒体 查询 不 仅 支持 设备 
类 型 ,还 支持 设备 特性 。CSS3 媒体 查询 可 用 于 检测 很 多 设备 特性 ,例如 视窗 (viewport) 
的 宽度 和 高 度 、 设 备 (device) 的 宽度 和 高 度 、 朝 向 (orientation) 分辨 率 、 颜 色 数 等 。 根 据 
获取 的 这 些 特 性 值 ,就 可 有 针对 性 地 为 内 容 添加 样式 了 。 

媒体 查询 的 基本 语法 如 下 : 





@media not|only mediatype and (expressions){ 
css 代码 …; 1} 


其 中 expressions 是 一 个 表达 式 ,尽管 媒体 查询 支持 的 设备 特性 很 多 ,但 在 响应 式 网 页 设 
计 中 ,用 得 最 多 的 还 是 屏幕 尺寸 ,常用 的 检测 屏幕 尺寸 的 表达 式 ,例如 ,min-width: 
480px, 表 示 屏 幕 宽度 三 480px;max-width: 800px, 表 示 屏 幕 宽度 三 800px。 

下 面 是 一 个 实例 (7-1. html) , 当 浏览 器 窗口 小 于 480px 时 ,hl 元 素 只 有 蓝 色 背 景 ,而 
当 窗 口 大 于 480px 时 ,hl 元 素 将 具有 装饰 性 的 图 片 背景 ,效果 如 图 7-1 所 示 。 


<style> 
hl{ height:60px;line- height:60px;text- indent:30px; 
background:#0099CC;color:white;border-bottom:3px solid red; 
} 
@media (min-width: 480px) { /* 屏幕 宽 度 宇 480px 时 */ 
hil{ height:160px; text-align:center; 
background:url (images/mkslou.jpg)no- repeat top center; 
ye 
</style> 


<hl> 衡 阳 师 范 学 院 < /hl> 


衡阳 师范 学 院 


图 7-1 媒体 查询 示例 (7-1. html) 





提示 : 由 于 对 同一 个 选择 器 后 面 声 明 的 样式 会 覆盖 前 面 声明 的 样式 ,因此 应 把 媒体 
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查询 的 代码 写 在 通用 CSS 代码 的 后 面 ,这 样 媒体 查询 定义 的 样式 就 不 会 被 通用 样式 
覆盖 。 
媒体 查询 的 另 一 种 用 法 是 有 条 件 地 加 载 不 同 的 样式 表 文件 ,语法 如 下 : 


示例 代码 如 下 : 


7.1.2 流 式 布局 
流 式 布 局 使 用 百分比 宽度 来 设置 布局 元 素 的 宽度 ,这 样 可 以 根据 客户 端 屏 幕 的 分 辩 
率 来 进行 合理 的 显示 。 流 式 布局 通常 要 与 媒体 查询 结合 起 来 使 用 ,才能 实现 响应 式 布局 。 
1. 流 式 布局 的 示例 


实现 流 式 布局 的 示例 代码 (7-2. html) 如 下 ,在 该 示例 中 , 当 网 页 较 宽 时 ,每 行 显示 
3 个 元 素 (3 列 ) ,网 页 较 窗 时 ,每 行 显示 2 个 元 素 ,网 页 最 窄 时 ,每 行 显示 一 个 元 素 。 其 效 
果 如 图 7-2 所 示 。 
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图 7-2 流 式 布局 实例 (7-2. html) 的 运行 效果 


说 明 : 

(1) 注意 媒体 查询 语句 的 书写 顺序 。 由 于 浏览 器 是 从 上 到 下 逐条 解释 代码 的 ,因此 
小 于 等 于 800px (max-width: 800px) 的 媒体 查询 语句 必须 写 在 小 于 等 于 480px(Cmax- 
width: 480px) 的 语句 之 前 。 如 果 颠 倒 过 来 , 则 在 小 于 等 于 480px 时 ,会 先 执行 小 于 等 于 
480px 时 定义 的 样式 ,再 执行 小 于 等 于 800px 时 定义 的 样式 ,最 终 显示 结果 为 小 于 等 于 
800px 时 的 样式 。 如 果 一 定 要 颠倒 过 来 , 则 应 该 将 @media(max-width: 800px) 改 为 : 





(2) 流 式 布局 与 浮动 的 区 别 。 如 果 将 本 例 中 6 个 浮动 元 素 都 设置 为 固定 宽度 (如 
width:300px;) ,而 且 不 使 用 媒体 查询 , 则 当 外 围 容器 变 罕 容纳 不 下 3 列 时 ,6 个 盒子 也 会 
逐渐 变 成 2 列 到 1 列 排列 。 但 这 时 ,由 于 6 个 盒子 是 固定 宽度 的 ,所 以 无 法 在 水 平方 向 撑 
满 外 围 容 器 。 外 围 容器 内 侧 右边 会 出 现 空隙 。 因 此 ,单纯 使 用 浮动 ,无 法 实现 流 式 布局 
效果 。 


2. box-sizing 属性 在 流 式 布局 中 的 应 用 
流 式 布局 的 最 大 特点 是 : 元 素 的 宽度 都 是 百分比 等 相对 宽度 ,这 样 每 个 元 素 才 会 随 
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着 浏览 器 宽度 的 改变 而 自动 伸缩 。 但 默认 情况 下 元 素 的 宽度 是 width 十 padding 十 
border ,而 border 的 宽度 不 能 设置 为 百分比 ,假如 设置 元 素 的 border 为 2px, width 为 
30 儿 , 则 元 素 占据 的 宽度 为 : 30% 十 2px, 这 样 的 宽度 将 变 得 不 好 计算 ,给 CSS 布局 带 来 
不 便 。 

为 此 ,CSS3 提供 了 box-sizing 属性 ,其 语法 如 下 : 


box- sizing:content-box | border-box 


。 值 为 content-box( 默 认 值 ) 时 ,元 素 的 实际 宽度 等 于 width 十 padding 十 border。 
。 值 为 border-box 时 ,元素 的 实际 宽度 就 等 于 width。 也 就 是 说 ,元 素 的 width 和 
height 值 包含 了 padding 和 border 的 宽度 。 

因此 可 将 box-sizing 属性 值 设 置 为 border-box, 这 样 元 素 的 宽度 就 等 于 width 值 ,此 
时 无 论 设置 border 和 padding 的 宽度 为 多 少 ,都 不 会 影响 元 素 的 宽度 ,并 且 其 子 元 素 占 
据 的 相对 宽度 也 会 自动 调整 。 

例如 ,对 浮动 的 两 列 分 别 设置 宽度 为 30% 和 70% ,如 果 再 设置 它们 的 border 为 1px， 
则 其 中 一 列 会 因为 容纳 不 下 而 排 到 下 一 行 ,但 如 果 对 它们 设置 了 box-sizing: border-box， 
则 不 会 出 现 容纳 不 下 的 情况 。 

另外 ,无论 box-sizing 属性 值 如 何 , 子 元 素 占据 的 总 是 元 素 内 容 的 宽度 。 假 设 父 元 素 
的 宽度 是 30% (实际 占 据 的 宽度 假设 为 300px) , 子 元 素 的 宽度 是 100% ,如 果 父 元 素 没有 
设置 border 和 padding, 则 子 元 素 实际 宽度 为 300px; 如 果 父 元 素 设置 了 10px 的 边框 , 则 
子 元 素 实际 占据 的 宽度 将 自动 调整 为 280px。 


7.1.3 自 适应 图 片 

在 响应 式 网 页 布局 中 ,一 般 希 望 图 片 的 大 小 跟随 窗口 或 容器 大 小 的 改变 而 自动 发 生 
变化 ,这 称 为 自 适应 图 片 技术 。 

1. img 元 素 的 自 适 应 图 片 


在 网 页 中 插入 图 片 的 方法 有 两 种 。 一 种 是 使 用 一 img 过 标记 插 和 人 图片, 对 于 这 种 图 
片 ,如 果 要 将 其 转变 为 自 适应 图 片 ,对 其 设置 如 下 CSS 样式 ,并 且 省 略 其 HTML 代码 中 
的 width 和 height 属性 即 可 。 代 码 (7-3. html) 如 下 ,效果 如 图 7-3 所 示 。 


#top img { 
max- width: 100%; height: auto; /x* max-width 值 不 能 大 于 100%*/ 
display: inline-block; } /该 句 可 选 * / 


<div id="top"><img src="images/2.jpg" /></div> 


2. 背景 图 片 的 自 适应 技术 





对 于 使 用 背景 属性 嵌入 的 图 片 . 由 于 CSS3 中 的 background-size 属性 可 改变 背景 图 
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图 7-3 到 img 之 标记 的 自 适应 图 片 效果 


像 大 小 ,因此 可 使 用 background-size 属性 使 图 片 成 为 自 适应 大 小 的 图 片 。 
background-size 属性 设置 为 : contain ,背景 图 片 将 保持 原来 的 比例 自 适 应 内 容 区 域 。 
如 果 内 容 区 域 的 长 宽 比 与 图 片 的 长 宽 比 不 一 致 , 则 内 容 区 域 会 存在 空白 区 。 
background-size 属性 设置 为 : cover, 背 景 图 片 将 保持 原来 的 比例 自 适应 内 容 区 域 。 
如 果 内 容 区 域 的 长 宽 比 与 图 片 的 长 宽 比 不 一 致 , 则 背景 图 片 会 裁 切 掉 一 部 分 以 撑 满 内 容 
区 域 。 这 种 方式 图 片 不 会 变形 ,元 素 也 不 会 留 有 空白 ,因此 用 作 背 景 图 片 的 自 适应 技术 。 
background-size 属性 设置 为 : 100% 100% ,背景 图 片 将 不 再 保持 原来 的 长 宽 比 ,而 
是 延展 覆盖 整个 区 域 , 因 此 背景 图 片 可 能 发 生变 形 。 
下 面 是 示例 代码 (7-4. html) ,其 显示 效果 如 图 7-4 所 示 。 


#banner {width: 100%; /* 宽度 要 设 为 百分比 * / 
background: url (img/2.jpg) no- repeat center center; 
/* 图 片 以 中 心 位 置 定位 x* / 
background- size: cover; /* 这 条 是 关键 * / 


min-height: 200px; |! 
<div id="banner"></div> 


ET 
© Dfile:///E:/chuanshan/backsize. htnl 


站 恒山 时 参 南 秀山 字 丰 X 
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图 7-4 background-size: cover 实现 背景 图 片 自 适 应 效果 


可 见 , 使 用 背景 图 片 自 适应 技术 ,其 元 素 高 度 不 会 发 生变 化 ,因此 图 片 的 某 些 区 域 会 
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被 裁 切 掉 ,如果 图 片 两 边 的 内 容 不 重要 .可 设置 背景 图 从 中 心 定位 ;如 果 右 边 的 内 容 不 重 
要 , 则 可 设置 背景 图 从 左边 开始 定位 。 

提示 : 在 网 页 中 引入 自 适应 图 片 时 ,图 片 最 好 按 浏览 器 或 容器 的 最 大 尺寸 来 设计 ， 以 
保证 在 各 种 屏幕 上 均 不 会 放大 图 像 ,以免 引起 失真 。 

如 果 对 video ,embed .object 等 元 素 设置 max-width: 100% , 则 可 让 HTML5 视频 及 
其 他 媒体 变 成 可 伸缩 的 (同样 不 要 在 HTML 中 为 它们 指定 width 和 height) 。 





7.1.4 一 列 变 宽 , 一 列 固定 的 方法 


一 列 变 宽 ,一 列 固 定 在 响应 式 布局 中 经 常 使 用 ,例如 图 7-5 中 左边 是 日 历 ( 或 图 片 )， 
右边 是 文本 。 当 浏览 器 或 容器 宽度 发 生变 化 时 ,一 般 不 希望 左右 两 列 都 发 生 等 比例 的 缩 
放 , 而 是 希望 比较 宽 的 一 列 ( 文 本 ) 发 生 缩放 ,比较 窗 的 列 (日 历 ) 宽 度 不 变 。 





[11.2 【船山 研究 论坛 】 王 船山 美学 思想 对 建构 中 国美 学 的 重要 意义 
向 二 地 点 凶 夫 模 一 报告 厅 
一 主讲， 张三丰 博士 





图 7-5 ”一列 变 宽 、 一 列 固定 的 例子 


实现 图 7-5 中 这 种 效果 有 几 种 方法 ,比如 5.2.4 节 中 的 设置 左边 列 浮动 ,右边 列 不 浮 
动 , 并 设置 右边 列 的 左 margin 等 于 左边 列 的 宽度 。 代 码 (7-5. html) 如 下 


.academic-ul li span { Vx 左 边 的 日 历 * / 
padding- top: 5px; float: left;} /* 左 浮动 */ 

.academic-ul li af /* 右 边 的 文本 元 素 * / 
display:block; margin- left:68px; /x* 给 左边 日 历 留 出 宽度 * / 


height:72px; overflow:hidden; } 
<ul class="academic-ul "> 
<1li><span><i class="year">11.22</i><i class="date"> 周 三 </i></span> 
<a href="#" target=" blank">【 船 山 研 究 论 坛 ] 王 船山 美学 …… 
<p> 地 点 :逸夫 楼 一 报告 厅 <br> 主 讲 : 张 三 丰 博士 < /p>< /a> 


</li></ul> 


另 一 种 方法 是 5. 5. 4 节 中 的 方法 , 即 左右 列 都 浮动 ,设置 右 列 的 宽 为 100% ,然后 通 
过 负 值 右 margin 将 其 往 右 拉 出 左边 列 的 宽度 。 


7.1.5 响应 式 网 页 的 头 部 代码 设置 





响应 式 网 页 必须 采用 HTML5 的 文档 声明 ,并 在 head 元 素 中 进行 以 下 设置 。 
1. 视 口 (viewport) 的 设置 
对 于 电脑 屏幕 来 说 ,屏幕 分 辩 率 越 高 ,显示 的 网 页 范围 就 越 广 ,比如 高 分 辩 率 的 屏幕 
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显示 固定 宽度 的 网 页 ,屏幕 左右 会 出 现 很 多 空白 ,这 说 明 电 脑 端 浏览 器 是 按 网 页 真实 的 像 
素 大 小 来 显示 的 。 

而 手机 浏览 器 却 不 是 这 样 ,尽管 不 同 手机 的 屏幕 像素 通常 是 不 同 的 ,比如 有 些 是 
720px 宽 ,有 些 是 1080px 宽 , 但 都 能 够 恰好 满 屏 显示 任何 宽度 的 网 页 (比如 1200px 宽 
的 ) ,这 说 明 手 机 浏览 器 对 网 页 进行 了 缩放 。 我 们 称 设备 大 小 (如 720px) 为 可 见 视 口 ,而 
网 页 宽度 (如 1200px) 为 视窗 视 口 。 

在 响应 式 网 页 中 ,必须 使 用 二 meta 二 标记 设置 视 口 ,代码 如 下 : 


<meta name= "viewport" content= "width=device-width，initial- scale=1"> 


其 中 ,width 一 device-width 告诉 浏览 器 页 面 的 宽度 等 于 设备 宽度 ,也 就 是 将 网 页 宽度 缩 
放 为 屏幕 宽度 ,initial-scale 一 1 表示 相对 于 可 见 视 口 进 行 缩放 ,初始 缩放 比例 是 1。 

通过 这 样 设置 后 ,网 页 在 任何 宽度 的 手机 屏幕 上 都 会 满 屏 显示 ,而 不 会 出 现 水 平 滚 
动 条 。 


2. 兼容 IE8 浏览 器 的 方法 


IE8 或 更 早 的 浏览 器 并 不 支持 媒体 查询 。 但 可 以 通过 引用 以 下 两 个 js 文件 来 修补 
IE8 的 这 种 缺陷 。 方 法 是 在 二 head> 标 签 里 加 入 如 下 条 件 注释 的 代码 : 


en 
<script src="js/respond.min.js"></script> 
<script src="js/html5shiv.js"></script> 
<![endif]- 一 > 


其 中 respond. min. js 文件 的 作用 是 使 IE8 支持 媒体 查询 ,html5shiv. js 是 使 IE8 能 够 支 
持 HTML5 新 增 的 标记 。 


7.2 响应 式 布局 的 网 站 实例 


响应 式 网 页 设计 就 是 让 一 个 网 站 能 够 兼容 多 种 设备 ,而 不 是 为 每 个 设备 制作 一 个 特 
定 的 版 本 。 响 应 式 网 页 设计 的 基本 步骤 大 致 是 : 

(1) 编写 非 响应 式 网 页 布局 代码 ; 

(2) 加 工 成 响应 式 布局 代码 ; 

(3) 睹 入 可 变 宽度 的 网 页 元 素 ( 如 导航 .栏目 框 等 ); 

(4) 对 网 页 元 素 进行 响应 式 细节 处 理 ; 

(5) 完成 响应 式 开发 的 最 后 工作 (如 头 部 设置 ,兼容 性 设置 等 ) 。 

其 中 第 (2) 和 第 (5) 步 主要 是 编写 媒体 查询 代码 。 

本 节 将 利用 响应 式 网 页 布局 的 各 种 技术 ,制作 一 个 简单 的 博客 网 站 ,网 页 效果 如 
图 7-6 所 示 。 
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a1/01/25 

百人 下 按 术 尼 的 分 天 ， 沪 每天 都 可 以 要 Internet 技 术 在 生 和 中 的 医大 作用 ， 
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图 7-6 网 页 在 电脑 端的 效果 


7.2.1 页 面 总 体 布局 的 实现 


该 网 页 是 一 个 1-2-1 式 的 等 比例 可 变 宽度 布局 的 页 面 ,在 电脑 端的 结构 框图 如 图 7-7 
所 示 。 在 移动 端的 网 页 效果 图 和 结构 框图 如 图 7-8 和 图 7-9 所 示 。 





页 头 








导航 
例 边 栏 文章 
































页 脚 
图 7-7 网 页 的 结构 框图 
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收藏 本 页 | 联 甬 
导航 | 
Internet 技 术 的 应 用 俩 过冬 
在 信息 技术 发 达 的 今天 ， 读 者 每 天 都 
可 以 感受 到 Internet 技 术 在 生活 中 的 巨大 
作用 。 通 过 Internet， 读 者 可 以 每 天 浏览 
到 最 新 的 新 闻 ， 可 以 参与 论坛 各 种 话题 火 六 于 
J 文章 
网 页 技术 学 前 班 
Internet， 中 文 称 为 国际 互联 网 。 众 
所 周知 ，Internet 起 源 于 1969 年 ， 由 美国 
国防 部 授权 ARPANET 【高 级 研究 灿 划 署 ) 一 
进行 的 互联 网 的 试验 。 当 初 没有 人 会 预料 页 脚 
图 7-8 网 页 在 移动 端的 效果 图 图 7-9 移动 端的 结构 框图 


实现 页 面 布局 的 HTML 代码 (7-6. html) 如 下 


<header> 页 头 < /header> 

<nav> 导 航 < /nav> 

<section class= "clearfix"> 
<aside> 侧 边栏 </aside> 
<article> 文 章 < /article> 

</section> 

<footer> 页 脚 < /footer> 


该 网 页 的 布局 样式 主要 是 设置 中 间 两 列 浮动 ,并 根据 网 页 效果 图 中 左右 两 列 的 大 小 


计算 出 左右 两 列 宽 的 百分比 ,然后 对 两 列 的 容器 元 素 (section) 清 除 浮动 。 最 后 设计 移动 
端的 布局 样式 ,只 要 设置 左右 两 列 不 浮动 就 可 以 了 。CSS 布局 代码 如 下 : 
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* {box- sizing:border-box; text-align:center} /= 设置 盒 模型 为 border-boxx / 
body> * {width:95%; height:auto; margin:0 auto; margin- top:10px; 
border:1px solid #000; padding:Spx;} 
header {height :50px;} 
section{overflow:hidden;} 
footer{height:30px;} 
section> * {height:200px; border:1lpx solid #000; float:left;} 


/* 对 中 间 两 列 设置 样式 * / 
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7.2.2 页 头 的 设计 


该 网 页 的 页 头 部 分 采用 大 图 平 铺 、 中 心 定位 的 设计 思想 。 即 网 页 足够 宽 时 ,将 显示 页 
头 的 整个 背景 图 片 ; 网 页 变 窗 时 ,逐渐 隐藏 图 片 的 两 侧 , 只 显示 页 头 图 片 的 中 间 区 域 。 
页 头 部 分 的 结构 代码 (7-7. htmlD 如 下 : 





页 头 部 分 的 CSS 代码 如 下 : 





7.2.3 响应 式 导航 条 的 制作 


1. 大 屏 小 屏 下 导航 条 的 布局 
响应 式 导航 条 的 特点 是 导航 项 在 电脑 屏幕 上 水 平 排列 ,而 在 手机 端 屏 幕 上 则 是 垂直 
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排列 ( 见 图 7-10 右 )。 实 现 的 原理 是 设置 导航 项 (li 元 素 ) 在 大 屏 上 浮动 ,在 小 屏 上 不 浮 
动 。 代 码 (7-8. html) 如 下 : 


#menu ul li{float: left;} 
@media (max-width: 768px){ 
#menu ul 1i {float:none; text-align: center; } } 


响应 式 导 航 条 在 小 屏 上 默认 是 隐藏 的 ,代码 如 下 : 


#menu>ul {display: none;} 


导航 条 在 大 屏 下 宽度 为 80% 居 中 显示 ,在 小 屏 下 宽度 为 100% ,代码 如 下 : 


nav{width: 100%; min-height: 38px; padding- top:2px; 
background: url (img/menubg.jpg) repeat-x; 
position:relative;} 
nav> #menu{ 
width: 80%;margin:0 auto; } 
@media (max-width: 768px){ 
#menu, section{width:100%}} /* 导航 和 主体 区 域 在 小 屏 时 为 100%$* / 


2. 小 屏幕 下 导航 条 的 按钮 切换 


在 手机 屏幕 下 ,响应 式 导航 条 默认 是 隐藏 的 , 当 单 击 “ 汉 堡 按钮 ”, 响 应 式 导航 条 就 能 
在 显示 和 隐藏 两 种 状态 之 间 切 换 ,如 图 7-10 所 示 。 这 种 切换 状态 和 表单 中 复 选 框 的 选中 
状态 切换 很 相似 ,并 且 CSS3 支持 :checked 人 擅 类 选择 器 ,能 设置 在 选中 状态 下 的 样式 。 


首 页 





图 7-10 小 屏幕 下 导航 条 隐藏 状态 ( 左 ) 和 显示 状态 ( 右 ) 


但 是 如 果 直 接 在 页 面 上 放 一 个 复 选 框 , 则 页 面 会 显得 很 难看 。 为 此 ,可 以 用 一 张 “ 汉 
堡 按 钮 ”的 图 片 代替 该 复 选 框 ,并 且 要 能 实现 单 击 该 图 片 就 等 价 于 单 击 复 选 框 的 效果 。 而 
我 们 知道 ,可 以 将 一 个 表单 元 素 和 一 个 天 label 二 标记 关联 起 来 ,这 时 单 击 label 元 素 就 相 
当 于 单 击 表单 元 素 。 那 么 ,就 可 以 设置 label 元 素 的 图 片 为 “汉堡 按钮 ,再 将 复 选 框 元 素 
隐藏 起 来 ,这样 单 击 “ 汉 堡 按钮 ?图 片 (label 元 素 ) 就 相当 于 单 击 复 选 框 了 。 

为 此 ,需要 在 响应 式 导航 条 中 添加 一 个 复 选 框 和 一 个 label 元 素 , 将 导航 条 的 结构 代 
码 修 改 如 下 : 
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<nav> 

<div id="menu"> 
<input type="checkbox" id="togglebox" /> <!-- 复 选 框 ,用 于 切换 --> 

<ul> 
<1li><a href="./" class="current"><span class="left"> 首 页 </span></a> 
</1li> 


<li><a href="#"><span class="left"> 文 章 </span></a></1i> 


<1i><a href="#"><span class="left"> 联 系 方式 </span></a></li></ul> 
<!-- 汉 堡 菜单 按钮 , for 属性 值 为 复 选 框 id- -> 
<label class= "menubut" for="togglebox"> <img src="images/menu.png"/></label> 
</div></nav> 


设置 复 选 框 和 label 元 素 在 大 屏 状态 下 隐藏 起 来 。 代 码 如 下 : 
#menu input [type= "checkbox"] , .menubut{ display:none; } 


再 设置 label 元 素 在 小 屏 下 显示 出 来 ,并 且 绝 对 定位 到 导航 条 右 侧 ,代码 如 下 : 


.menubut { 
display: block; position: absolute; /* 相对 于 nav 元 素 绝对 定位 * / 
right: 3%; top :4px; cursor: pointer; /* 设 定 鼠 标的 形状 为 手 * / } 


.menubut img{width:100%;} 


当 单 击 “ 汉 像 按钮 "(label 元 素 ) 时 ,显示 菜单 ul, 代码 如 下 : 


#menu input [type= "checkbox"] :checked+ul { display: block; } 


至 此 ,响应 式 导 航 条 制作 完成 ,读者 还 可 给 导航 条 下 拉 显 示 时 添加 下 拉 滑 动 等 动画 


7.2.4 响应 式 栏目 的 制作 


在 响应 式 网 页 中 ,由 于 每 列 的 宽度 是 变化 的 ,因此 每 个 栏目 都 不 能 设置 绝对 宽度 ,而 
只 能 设置 相对 宽度 (百分比 ) 。 除 此 之 外 ,还 要 考虑 列 很 窗 的 情况 下 ,图 片 或 文字 的 显示 位 
置 不 够 ,这 时 可 以 把 图 片 和 文字 的 大 小 适当 缩小 ,或 者 让 原来 水 平 排列 的 元 素 变 为 垂直 
排列 。 

以 如 图 7-11 所 示 的 “最 新 日 志 ? 栏 目 为 例 ,来 分 析 如 何 进行 响应 式 网 页 的 细节 调整 。 
该 栏目 对 应 的 结构 代码 (7-9. html) 如 下 : 

<div id="daily" class="clearfix"> 


<h2> | 最 新 日 志 < /h2> 
<div class="lanmu"> <!-- 第 一 条 日 志 开始 --> 
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<img src= "img/pic1.jpg"/><span class="date">2011/01/25< /span> 
<h3> Internet 技术 的 应 用 </h3> <p> 在 信息 技术 发 达 ……< /p> 
</div> <!-- 第 一 条 日 志 结束 --> 
<hr style="clear:both;" /> 


< !-- 此 处 省 略 第 二 条 日 志 代 码 , 因 为 与 第 一 条 一 样 --> </div> 


| 最 新 日 志 


Internet 技 术 的 应 用 
在 信息 技术 发 达 的 今天 ， 读 者 每 天 都 可 以 感受 到 
Internet 技 术 在 生活 中 的 巨大 作用 。 通 过 Internet， 
该 者 可 以 每 天 浏览 到 最 新 的 新 闻 ， 可 以 参与 论坛 各 种 话 | 
题 火热 的 讨论 ， 可 以 和 世界 各 地 的 朋友 一 起 玩 游戏 等 。 





网 页 技术 学 前 班 
Internet， 中 文 称 为 国际 互联 网 。 众 所 周知 ， 
Internet 起 源 于 1969 年 ， 由 美国 国防 部 授权 
ARPANET (高 级 研究 规划 署 ) 进行 的 互联 网 的 试验 。 当 
初 没有 人 会 预料 到 ， 在 几 十 年 后 的 今天 ， 互 联网 成 了 全 | 


图 7-11 最 新 日 志 栏 目 











非 响应 式 的 CSS 样式 代码 如 下 : 


#daily img{float:left; padding: 5px; border:1lpx solid #ccc; width:240px; } 
span.date{ffont- style:normal; float:right; padding:8px 60px 0 0;} 
#daily p{margin- left:260px; 
line-height:1.6em; clear:right; text- indent:2em; overflow: 
hidden;} 
#daily h3{ margin: 10px; padding: 6px; font- size: 1.2em; 
font- weight: bold; color: #900; height: 24px; 
background: url (img/h3bg .png) left center no- repeat;} 


响应 式 的 CSS 样式 代码 如 下 : 


@media (max-width: 1000px) { 


#daily img{ width:160px; } /* 缩小 图 片 尺寸 */ 
#daily pfmargin- left:180px; font- size:0.8em;} /* 缩小 文字 * / 
span.date{display:none;}} /* 隐藏 日 期 * / 


其 他 栏目 的 制作 与 之 类 似 , 该 网 页 的 完整 代码 可 参看 配套 源 文件 中 的 7-10. html。 

最 后 , 别 忘 了 对 响应 式 网 页 进行 必要 的 头 部 设置 ,如 采用 HTML5 声明 ,并 加 上 视 口 
设置 标签 等 ,具体 请 参考 7. 1. 5 节 的 内 容 。 设 置 完成 后 ,可 以 用 Chrome 浏览 器 的 手机 模 
式 预览 (使 用 右键 快捷 菜单 中 的 “检查 ”命令 ), 如 图 7-12 所 示 , 如 果 手 机 模式 下 看 到 的 是 
移动 端 网 页 界面 , 则 表明 头 部 设置 正确 :如果 手机 模式 下 看 到 的 仍然 是 电脑 端 网 页 界面 ， 
则 表明 头 部 设置 不 正确 。 
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€ 3 CDfile://F:/PHP 书 稿 /chapter2 三 





Responsive ¥ 350 x 217 100% 9 








民 Elements Console Sources » (Be 
RS = 
<html lang="zh-CH"> 切换 到 手机 模式 按钮 国 


Pp <head>-</head> 





图 7-12 Chrome 浏览 器 的 手机 测试 模式 


习 题 


.box-sizing 属性 在 响应 式 网 页 设计 中 有 什么 用 途 ? 

.响应 式 导 航 条 中 的 汉堡 按钮 是 用 什么 标签 实现 的 ? 

.响应 式 网 页 设计 的 关键 技术 包括 哪些 ? 

. img 元 素 图 片 和 背景 图 片 的 自 适应 大 小 分 别 应 采用 什么 方法 ? 

. 有 以 下 两 条 媒体 查询 语句 : @ media (max-width: 480px){} 和 @ media (max- 
width: 800px){ ) ,如 果 要 使 两 条 语句 中 的 样式 都 起 作用 , 则 哪 条 语句 应 写 在 前 面 ? 


an mo 
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第 8 章 JavaScript 与 jQuery 基础 


网 页 除了 外 观 设计 外 ,还 需要 用 户 交互 设计 ,例如 响应 用 户 的 鼠标 键盘 操作 、 验 证 表 
单数 据 以 及 动态 改变 HTML 元 素 的 外 观 等 ,这 些 都 需要 编写 浏览 器 端 程序 来 实现 。 
JavaScript 是 一 种 浏览 器 的 编程 脚本 语言 ,专门 用 来 编写 浏览 器 程序 (也 称 为 客户 端 肢 
本 )。 


8.1 JavaScript 的 代码 结构 


JavaScript 是 事件 驱动 的 语言 。 当 用 户 在 网 页 中 进行 某 项 操作 时 ,就 产生 了 一 个 “ 事 
件 ”(event)。 事 件 几 乎 可 以 是 任何 事情 : 单 击 一 个 网 页 元 素 、 拖 动 鼠 标 等 均 可 视 为 事件 。 
JavaScript 是 事件 驱动 的 , 当 事 件 发 生 时 , 它 可 以 对 之 做 出 响应 。 具 体 如何 响 应 某 个 事件 
由 编写 的 事件 处 理 程序 决定 。 

因此 ,一 个 JavaScript 程序 一 般 由 “事件 十 事件 处 理 程序 ”组 成 。 根 据 事件 处 理 程序 
所 在 的 位 置 ,在 HTML 代码 中 内 入 JavaScript 有 3 种 方式 。 


1. 将 脚本 嵌入 到 HTML 标记 的 事件 中 (行内 式 ) 


HTML 标记 中 可 以 添加 “事件 属性 ”, 其 属性 名 是 事件 名 ,属性 值 是 JavaScript 脚本 
代码 。 例 如 (8-1. html) : 


<html><body> 
<p onclick="alert ('Hello, The Web World!');">Click Here< /p> 
</body></html> 


其 中 ,onclick 表示 单 击 鼠标 事件 , 它 是 一 个 JavaScript 事件 名 ,也 是 一 个 HTML 事件 属 
性 。“alert(…);” 是 事件 处 理 代 码 , 作 用 是 弹出 一 个 警告 框 。 因 此 , 当 在 这 个 p 元 素 上 单 
击 鼠 标 时 ,就 会 弹出 一 个 警告 框 ,运行 效果 如 图 8-1 所 示 。 





Click Here 从 Hello, the WEB world! 
单 击 此 处 


图 8-1 8-1. html 和 8-2. html 的 运行 效果 


JavaScript 与 jQuery 基础 


2. 使 用 二 script 二 标记 将 脚本 嵌入 到 网 页 中 ( 赃 入 式 ) 


在 HTML 文档 中 ,通过 一 script 之 标记 可 以 嵌入 JavaScript 代码 ,这 是 标准 的 嵌入 
JavaScript 代码 的 方式 ,建议 将 所 有 的 JavaScript 代码 都 写 在 二 script 二 一 /script 二 标记 
之 间 ,而 不 要 写 在 HTML 标记 的 事件 属性 内 。 这 可 实现 HTML 代码 与 JavaScript 代码 
的 分 离 。 下 面 的 代码 (8-2. html) 采 用 嵌入 式 JavaScript, 其 运行 效果 与 8-1. html 完全 
相同 。 


<html><head> < 602. ——> 
<script> 
function msg (){ // 定 义 函 数 msg 
alert ("Hello, the WEB world!"); 
</script></head> 
<body> <p onclick="msg()">Click Here< /p> <!-- 通 过 事件 调用 函数 --> 
</body></html> 


其 中 ,“onclick 二 "msg()"” 表 示 调 用 函数 msg。 可 见 , 调 用 JavaScript 函数 可 写 在 HTML 
标记 的 事件 属性 中 ,但 函数 的 代码 必须 写 在 二 script 二 三 /script 二 标记 之 间 。 

将 JavaScript 代码 写成 函数 的 一 个 好 处 是 : 可 以 让 多 个 HTML 元 素 或 不 同事 件 调 
用 同一 个 函数 ,从 而 提高 了 代码 的 重用 性 。 


3. 使 用 二 script 二 标记 的 src 属性 链接 外 部 脚本 文件 (链接 式 ) 


如 果 有 多 个 网 页 文件 需要 共用 一 段 JavaScript, 则 可 以 把 这 段 脚本 保存 成 一 个 单独 
的 .js 文件 (JavaScript 外 部 脚本 文件 的 扩展 名 为 .js) ,然后 在 网 页 中 调用 该 文件 ,这 样 既 
提高 了 代码 的 重用 性 ,也 方便 了 维护 ,修改 脚本 时 只 需 修改 .js 文件 中 的 代码 。 

引用 外 部 脚本 文件 的 方法 是 使 用 二 script 二 标记 的 src 属性 来 指定 外 部 文件 的 URL。 
示例 代码 如 下 (8-3. html 和 8-3.js 位 于 同一 目录 下 ) ,运行 效果 如 图 8-1 所 示 。 

本 8-3. html 的 代码 一 一 一 -一 一 一 一- 

<html><body> 

<script src="8-3.js "></script> 

<p onclick= "msg()">Click Here< /p> 

</body>< /html> 


的 


function msg(){ // 定 义 函 数 msg 
alert ("Hello, the WEB world!"); } 
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8.2 JavaScript 的 事件 编程 


8.2.1 JavaScript 语言 基础 


JavaScript 代码 是 严格 区 分 大 小 写 的 ,每 条 语句 以 "; "结束 。 语 法 类 似 于 Java。 


1. 变量 和 数组 的 声明 


JavaScript 任何 类 型 的 变量 声明 都 用 var, 甚 至 可 以 不 声明 直接 使 用 。 数 组 使 用 关键 
字 Array 来 声明 ,同时 还 可 以 指定 这 个 数组 元 素 的 个 数 , 即 数组 的 长 度 (length) ,例如 : 














var name="Six Tang"; // 定 义 了 一 个 字符 串 变 量 
var age=287 // 定 义 了 一 个 数值 型 变量 
var male=True; // 将 变量 赋值 为 布尔 型 

var rank=new Array (12); // 第 1 种 声明 数组 的 方法 


var Map=new Array ("China", "USA", "Britain"); // 第 2 种 声明 数组 的 方法 


2. 数据 类 型 


JavaScript 支持 字符 串 .数值 型 和 布尔 型 3 种 基本 数据 类 型 ,支持 数组 .对 象 两 种 复 
合 数 据 类 型 ,在 JavaScript 中 ,每 一 种 数据 类 型 都 是 对 象 ,可 以 用 “对 象 . 属性 ”或 “对 象 . 方 


法 O ”对 该 数据 类 型 的 变量 进行 操作 。 例 如 : 
var course="data structure"; // 字 符 串 数据 类 型 , course 为 字符 串 变 量 
Pos= course.indexOf ("str"); // 返 回 子 串 的 位 置 ,返回 5 
strl=course.substr (5,3); // 返 回 "str" ,5 表示 开始 位 置 ,3 表示 长 度 
len=course.length; // 返 回 字符 串 长 度 14 
alert (pos+ strl+len) /1/"+ "是 连接 符 ,弹出 "5str14" 


8.2.2 常用 JavaScript 事件 


编写 JavaScript 程序 需要 考虑 3 个 问题 : 第 一 ,触发 程序 执行 的 事件 是 什么 ;第 二 ， 


如 何 编写 





有 件 处 理 程序 ;第 三 ,获取 事件 作用 的 DOM 对 象 (HTML 元 素 ) 。 


对 于 用 户 而 言 ,常用 的 JavaScript 事件 可 分 为 鼠标 事件 .HTML 事件 和 键盘 事件 








3 类 ,其 中 常用 的 鼠标 事件 如 表 8-1 所 示 ,常用 的 HTML 事件 如 表 8-2 所 示 。 
表 8-1 鼠标 事件 的 种 类 
事 件 名 描述 
onclick 单 击 鼠 标 左 键 时 触发 
ondbclick 双击 鼠标 左 键 时 触发 
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续 表 
事 件 名 描 述 

onmousedown 鼠标 任意 一 个 按键 按 下 时 触发 

onmouseup 松 开 鼠 标 任意 一 个 按键 时 触发 

onmouseover 鼠标 移动 到 元 素 上 时 触发 

onmouseout 鼠标 移出 该 元 素 边界 时 触发 

onmousemove 鼠标 指针 在 某 个 元 素 上 移动 时 持续 触发 

表 8-2 常用 的 HTML 事件 

事 件 名 描 述 
onload 页 面 完 全 加 载 后 在 window 对 象 上 触发 ,图 片 加 载 完成 后 在 其 上 触发 
onunload 页 面 完 全 印 载 后 在 window 对 象 上 触发 ,图 片 印 载 完成 后 在 其 上 触发 
onerror 脚本 出 错时 在 window 对 象 上 触发 ,图 像 无 法 载 人 时 在 其 上 触发 
onselect 选择 了 文本 框 的 某 些 字 符 或 下 拉 列 表 框 的 某 项 后 触发 
onchange 文本 框 或 下 拉 框 内 容 改 变 时 触发 
onsubmit 表单 提交 时 (如 单 击 提交 按钮 ) 在 表单 form 上 触发 
onblur 任何 元 素 或 窗口 失去 焦点 时 触发 
onfocus 任何 元 素 或 窗口 获得 焦点 时 触发 
onscroll 浏览 器 的 滚动 条 滚动 时 触发 





对 于 某 些 元 素来 说 ,还 存在 一 些 特殊 的 事件 ,例如 body 元 素 就 有 onresize( 当 窗口 改 
变 大 小 时 触发 ) 和 onscroll( 当 窗口 滚动 时 触发 ) 这 样 的 特殊 事件 。 

键盘 事件 相对 来 说 用 得 较 少 ,主要 有 keydown( 按 下 键盘 上 某 个 按键 触发 ) keypress 
( 按 下 某 个 按键 并 且 产 生 了 字符 时 才 触 发 , 即 忽略 Shift、Alt 等 功能 键 ) 和 keyup( 释 放 按 
键 时 触发 )。 通 常 键盘 事件 只 有 在 文本 框 中 才 显 得 有 实际 意义 。 

提示 : JavaScript 事件 名 应 该 全 部 小 写 , 因 为 JavaScript 代码 是 区 分 大 小 写 的 ,尽管 
HTML 标记 中 的 事件 属性 名 是 不 区 分 大 小 写 的 。 


8.2.3 事件 监听 程序 


实际 上 ,事件 除了 可 写 在 HTML 标记 中 ,还 可 以 “对 象 .事件 ”的 形式 出 现 ,这 称 为 事 
件 监听 程序 。 其 中 对 象 可 以 是 DOM 对 象 、 浏 览 器 对 象 或 JavaScript 内 置 对 象 。 下 面 采 
用 事件 监听 程序 的 方式 重 写 8-2. html, 代 码 (8-4. html) 如 下 : 


<html><head> 
<script> 
var demo= document .getElementById ("demo"); 
/* 获取 id 为 demo 的 HTML 元 素 , 由 于 该 HTML 元 素 的 代码 在 后 面 ， 
此 时 尚未 载 人 ,会 发 生 " 对 象 不 存在 "的 错误 * / 
demo.onclick=msg; //demo 对 象 单 击 时 执行 msg 函数 
function msg() { 
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alert ("Hello, the WEB world!"); } 
</script></head> 
<body> 
<p id="demo">Click Here< /p> 
</body>< /html> 


其 中 ,为 p 元 素 添加 了 一 个 id 属 性 ,是 为 了 使 JavaScript 脚本 方便 获取 该 元 素 。 通 过 document 
. getElementById("demo") 方 法 就 可 根据 id 访问 这 个 元 素 ,该 方法 返回 的 结果 是 一 个 
DOM 对 象 : demo。 

然后 ,通过 “DOM 对 象 . 事件 名 三 因数 名 ”就 能 设置 该 对 象 在 事件 发 生 时 将 执行 的 
函数 。 

但 是 ,该 程序 运行 会 出 错 ,原因 在 于 : 浏览 器 是 从 上 到 下 依次 执行 网 页 代码 的 。 当 执 
行 到 获取 id 为 demo 的 HTML 元 素 时 ,由 于 该 HTML 元 素 的 代码 在 下 面 ,浏览 器 此 时 
尚未 载 入 该 元 素 ,就 会 发 生 对 象 不 存在 的 错误 。 要 解决 该 错误 ,有 以 下 两 种 办 法 。 

(1) 把 JavaScript 脚本 放 在 HTML 元 素 代码 的 下 面 。 修 改 后 的 代码 (8-5. html) 
如 下 : 


<p id= "demo">Click Here< /p> 
<script> 
var demo=document .getElementById ("demo"); // 放 在 demo 元 素 的 后 面 
demo.onclick=msg; 
function msg() 
alert ("Hello, the WEB world!"); } 
</script> 


运行 该 程序 ,就 能 得 到 如 图 8-1 所 示 的 运行 结果 了 。 

(2) 把 获取 HTML 元 素 的 代码 写 在 windows. onload 事件 中 ,这 样 就 可 避免 只 能 把 
JavaScript 代码 写 在 HTML 元 素 下 面 的 麻烦 ,其 中 ,windows. onload 事件 表示 浏览 器 载 
入 网 页 完毕 时 触发 ,这 时 所 有 的 HTML 元 素 都 已 经 载 人 到 浏览 器 中 ,无 论 JavaScript 代 
码 位 置 在 哪里 ,都 不 会 产生 找 不 到 对 象 的 错误 。 修 改 后 的 代码 (8-6. html) 如 下 : 


<script> 

window.onload= function () { // 表 示 在 网 页 载 人 完毕 后 执行 函数 
var demo=document .getElementById ("demo"); 

demo.onclick=msg; } // 调 用 函数 ,函数 名 不 能 加 括号 

function msg() { 


alert ("Hello, the WEB world!"); } 
</script> 


<p id="demo">Click Here< /p> 


提示 : 
@ 程序 中 的 “对 象 . 事件 名 ”后 只 能 接 函 数 名 ,而 绝对 不 能 接 函 数 名 加 括号 。 例 如 ， 
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demo. onclick 一 msg 绝对 不 能 写成 demo. onclick 一 msg() ,因为 函数 名 表示 调用 函数 ,而 
济 数 名 带 括号 表示 运行 函数 。 

@ demo. onclick 一 msg; 可 放 在 window. onload 二 function(){…} 语 名 外 ,因为 单 击 
事件 发 生 时 网 页 肯定 已 载 入 完毕 了 。 

(3) 用 事件 监听 程序 调用 有 参 函 数 。 

通过 上 例 已 经 知道 ,“ 对 象 . 事件 名 ”后 只 能 接 函 数 名 ,不 能 加 括号 ,这 对 无 参 函数 没 什 
么 问题 ;但 如 果 是 有 人参 函数 ,其 括号 内 有 参数 无 法 省 略 ,要 怎么 调用 呢 ? 方法 是 把 有 参 函 
数 放 在 一 个 匿名 函数 中 调用 ,代码 (8-7. html) 如 下 : 


<script> 


window.onload= function(){ // 表 示 在 网 页 载 入 完毕 后 执行 函数 


Var demo=document .getElementById ("demo"); 
demo.onclick=function() {msg(" 张 三 ");} } // 调 用 有 参 函 数 的 方法 
function msg(sname) 

alert ("Hello, "+ sname); } 
</script> 
<p id="demo">Click Here< /p> 


8.3 JavaScript DOM 编程 
把 使 用 JavaScript 程序 操纵 HTML 元 素 的 编程 称 为 JavaScript DOM 编程 。 
8.3.1 动态 效果 的 实现 


很 多 网 页 中 都 存在 一 些 动态 效果 ,比如 鼠标 指针 滑动 到 某 个 文本 或 图 像 上 时 ,文本 或 
图 像 会 发 生变 化 ,或 者 消失 ,或 者 变 大 变 小 等 ,这 些 都 是 用 JavaScript 程序 实现 的 。 编 写 
动态 效果 程序 的 一 般 步骤 是 : 

(1) 找到 要 实现 动态 效果 的 对 象 (网 页 元 素 ); 

(2) 为 其 添加 事件 ; 

(3) 编写 事件 处 理 函 数 ; 

(4) 在 事件 处 理 函 数 中 通过 改变 网 页 元 素 的 属性 或 内 容 来 实现 动态 效果 。 

下 面 是 一 个 例子 , 当 鼠 标 指针 滑动 到 标题 文字 上 时 ,标题 文字 和 它 下 方 的 图 片 就 会 发 
生变 化 ,效果 如 图 8-2 所 示 , 代 码 (8-8. html) 如 下 : 


<h2 id="tit"> 会 变 的 图 片 </h2> 
<img src="images/picl.jpg" id="picl"/> 


<script> // 必 须 写 在 picl 元 素 后 面 
var imgl=document .getElementById ("pic1"); // 获 取 id 为 picl 的 元 素 
var tit=document .getElementById ("tit"); // 获 取 id 为 tit 的 元 素 
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tit.onmouseover=change; // 当 鼠标 指针 滑动 到 tit 元 素 上 时 调用 change 函数 
function change (){ 
imgl.src="images/pic2.jpg"; ”// 设 置 imgl 的 src 属性 为 另 一 张 图 片 
tit.innerHTML= "看 到 变化 了 吗 "; ”// 设 置 tit 的 内 容 为 另 一 个 文本 


j< /script> 
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文件 介 ”编辑 E) 查 ”| 避 文件 EE) 编辑 E) 查 ” 导 
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图 8-2 ”鼠标 指针 滑动 到 标题 上 文字 和 图 片 发 生变 化 
下 面 分 别 讲述 动态 效果 程序 编写 时 每 一 步 的 实现 方法 。 
8.3.2 获取 指定 元 素 
在 JavaScript 中 ,通常 根据 HTML 元 素 的 id、name 或 标记 名 ,获取 指定 的 元 素 , 并 返 


回 一 个 DOM 对 象 (或 数组 ) 。document 对 象 提 供 了 4 个 相关 方法 ,如 表 8-3 所 示 。 
表 8-3 获取 HTML 元 素 对 象 的 方法 





方 法 描 述 返回 值 类 型 
getElementById() 返回 拥有 指定 id 属性 的 元 素 对 象 
getElementsByName() 返回 拥有 指定 name 属性 的 元 素 集合 数组 
getElementsByTagName() 返回 拥有 指定 标记 名 的 元 素 集合 数组 
getElementsByClassName() 返回 拥有 指定 class 属性 值 的 元 素 集合 数组 





其 中 ,getElementById() 是 最 常用 的 方法 ,只 要 给 HTML 元 素 设 置 了 id 属性 ,就 可 
用 该 方法 访问 元 素 。 而 其 他 3 个 方法 由 于 返回 的 是 数组 ,要 使 用 它们 获取 单个 HTML 
元 素 必须 添加 数组 下 标 , 例 如 : 


var tj=document .getElementsByName ("tj") [1]; // 获 取 第 2 个 name 属性 为 tj 的 元 素 
var mul=document .getElementsByTagName ("ul") [0]; // 获 取 第 一 个 <ul> 标 记 的 元 素 
1. 添加 事件 


在 获取 了 要 发 生 交 互 效果 的 HTML 元 素 后 ,就 可 给 它 添 加 事件 。 添 加 事件 可 采用 
HTML 事件 属性 或 事件 监听 程序 添加 。 推 荐 使 用 事件 监听 程序 ,以 实现 HTML 代码 与 
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JavaScript 代码 的 分 离 。 例 如 : 


var tit=document .getElementById("tit");  // 获 取 id 为 tit 的 元 素 
tit.onmouseover=change; // 为 tit 元 素 添加 事件 ,并 设置 事件 处 理 函 数 


接 下 来 ,就 可 编写 事件 处 理 函 数 。 在 事件 处 理 函 数 中 ,动态 效果 一 般 是 通过 改变 
HTML 元 素 的 内 容 、 属 性 或 CSS 属性 实现 的 。 


2. 访问 元 素 的 HTML 属性 


当 获 取 到 指定 的 HTML 元 素 (DOM 对 象 ) 后 ,就 可 使 用 “DOM 对 象 . 属性 名 ”来 访问 
元 素 的 HTML 属性 了 。 该 属性 是 可 读 写 的 , 读 取 和 设置 元 素 的 HTML 属性 的 方法 是 : 


变量 =DoM 对 象 .属性 名 // 读 取 元 素 的 HTML 属性 
DOM 对 象 .属性 名 = 属性 值 // 设 置 元 素 的 HTML 属性 


下 面 是 一 个 例子 (8-9. html) , 当 鼠 标 指针 滑动 到 文字 上 (p 元 素 ) 时 ,改变 该 元 素 的 
align 属性 ,使 文字 左右 跳动 ,效果 如 图 8-3 所 示 ,代码 如 下 : 


<p id="mov" align="left"> 跳 动 的 文字 < /p> 


<script> // 必 须 写 在 mov 元 素 后 面 
Var mov=document .getElementById ("mov"); // 获 取 id 为 mov 的 元 素 
mov .onmouseover=change; // 当 鼠标 指针 滑动 到 mov 元 素 上 时 调用 change 函数 
function change (){ 
if (mov.align=="]left") { // 读 取 mov.align 属性 并 比较 
mov.align="right";} // 设 置 mov.align 属性 的 值 
else mov.align= "left"; 
</script> 







文件 中 编辑 EE) 查 ”| 辟 
人 跳动 的 文字 F 


8-3 文字 左右 移动 效果 

















提示 : 该 例 中 mov. align 也 可 写 为 this. align, 在 JavaScript 中 ,如 果 this 放置 在 函数 
体内 ,那么 this 指 代 调用 该 函数 的 事件 前 的 对 象 。 


8.3.3 访问 元 素 的 CSS 属性 


访问 元 素 的 CSS 属性 可 以 使 用 "DOM 对 象 . style. CSS 属性 名 ”的 方法 。 该 CSS 属 
性 也 是 可 读 写 的 , 读 取 和 设置 元 素 的 CSS 属性 的 方法 如 下 : 
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变量 =DoM 对象 . style.css 属性 名 // 读 取 元 素 的 css 属性 
DoM 对 象 .style.css 属性 名 = 属性 值 // 设 置 元 素 的 css 属性 


下 面 是 一 个 例子 (8-10. html) , 当 鼠 标 指针 滑动 到 文字 "沙漠 古 堡 " 上 时 ,第 一 张 图 片 
就 会 变 大 ,同时 第 二 张 图 片 会 消失 ,效果 如 图 8-4 所 示 ,代码 如 下 : 


<html><body> 

<b id= "tit"> 沙 漠 古 堡 </b> snbsp;<b id= "tit2"> 天 山 冰 湖 </b><br> 
<img src="images/picl.jpg" id="picl" width="75"/> 

<img src="images/pic2.jpg" id="pic2" width="75"/> 


<script> // 必 须 写 在 HTML 元 素 后 面 
var picl=document .getElementById ("picl1"); // 获 取 id 为 picl 的 元 素 
var pic2=document .getElementById ("pic2"); // 获 取 id 为 pic2 的 元 素 
var tit=document .getElementById("tit") 7 // 获 取 ia 为 tit 的 元 素 
tit.onmouseover=change; // 当 鼠标 指针 滑动 到 tit 元 素 上 时 调用 change 函数 
function change (){ 
pic2.style.display= "none"; // 隐 藏 pic2 
picl.style.width="140px"; // 设 置 picl 的 宽度 值 , 使 它 变 大 
picl.style.borderLeft="10px solid red";  } // 设 置 picl 的 左边 框 值 
</script> 
</body>< /html> 
=l9|x| =I9lx| 
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沙 六 古色 天 山 冰 湖 习 





图 8-4 图 片 变 大 或 消失 的 效果 


说 明 : 

(1) CSS 样式 设置 必须 符合 CSS 规范 ,否则 该 样式 会 被 忽略 。 

(2) 如 果 样 式 属性 名 称 中 不 带 “-” 号 ,例如 color, 则 直接 使 用 style. color 就 可 访问 该 
属性 值 ;如 果 样 式 属性 名 称 中 带 有 “-” 号 ,例如 font-size, 对 应 的 style 对 象 属性 名 称 为 
fontSize。 转 换 规则 是 去 掉 属 性 名 称 中 的 “-”, 再 把 后 面 单词 的 第 一 个 字母 大 写 。 又 如 
border-left-style, 对 应 的 style 对 象 属性 名 称 为 borderLeftStyle。 

(3) 对 于 CSS 属性 float, 不 能 使 用 style. float 访问 ,因为 float 是 JavaScript 的 保留 
字 , 要 访问 该 CSS 属性 ,在 正中 应 使 用 style. styleFloat, 在 Firefox 中 应 使 用 style 


.cssFloat。 
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(4) 使 用 style 对 象 只 能 读 取 到 元 素 的 行内 样式 ,而 不 能 读 取 元 素 所 有 的 CSS 样式 。 
如 果 将 HTML 元 素 的 CSS 样式 改 为 嵌入 式 , 那 么 style 对 象 是 访问 不 到 的 。 因 此 style 
对 象 获 取 的 属性 与 元 素 最 终 显示 效果 并 不 一 定 相 同 ,因为 可 能 还 有 非 行 内 样式 作用 于 
元 素 。 

(5) 如 果 使 用 style 对 象 设 置 元 素 的 CSS 属性 ,而 设置 的 CSS 属性 和 元 素 原 有 的 任 
何 CSS 属性 冲突 ,由 于 style 会 对 元 素 增加 一 个 行内 CSS 样式 属性 ,而 行内 CSS 样式 的 
优先 级 最 高 ,因此 通过 style 设置 的 样式 一 般 为 元 素 的 最 终 样式 。 


8.3.4 访问 元 素 的 内 容 


如 果 要 访问 或 设置 元 素 的 内 容 ,一 般 使 用 innerHTML 属性 。innerHTML 可 以 将 元 
素 的 内 容 ( 位 于 起 始 标 记 和 结束 标记 之 间 ) 改 变 成 其 他 任何 内 容 ( 如 文本 或 HTML 元 
素 )。innerHTML 虽然 不 是 DOM 标准 中 定义 的 属性 ,但 大 多 数 浏 览 器 却 都 支持 ,因此 不 
必 担 心 浏览 器 兼容 问题 。 

下 面 是 一 个 例子 (8-11. html) 。 当 色 选 表单 中 的 复 选 框 后 ,将 在 span 元 素 中 添加 内 
容 ( 文 字 和 文本 框 ), 取 消 勾 选 则 清空 span 元 素 的 内 容 。 效 果 如 图 8-5 所 示 ,代码 如 下 : 





<form name="userInfo" method="post" action=""> 您 有 小 孩 四 ? 有 : 
<input type= "checkbox" name= "hasBoy" id= "hasBoy" value= "1" onclick="check()" /> 
<span id="add"> gnbsp;</span>< /form> 
<script> 
function check(){ 
Var hasboy= document .forms ["userInfo"] .hasBoy; 
var add=document .getElementById ("add"); // 获 取 add 元 素 


if (hasboy.checked) 
add.innerHTML=" 有 几 个 <input type= 'text' name= 'textfield' />"; 
else add.innerHTML=""; } // 设 置 add 元 素 的 内 容 
</script> 










TEFS TERTIAE 


文件 四 编辑 E) 查看 WW) 历史 G) 书签 @) 
您 有 小 孩 吗 ? 有 ， 蔬 有 几 个 “| 语 


文件 四 编辑 @) 查看 WW 历 
您 有 小 孩 吗 ? 有 ， 口 








图 8-5 利用 innerHTML 改变 元 素 的 内 容 


8.4 使 用 浏览 器 对 象 


JavaScript 是 运行 在 浏览 器 中 的 ,因此 提供 了 一 系列 对 象 用 于 与 浏览 器 进行 交互 。 
这 些 对 象 主要 有 window document location history 和 screen 等 ,它们 统称 为 BOM 
(Browser Object Model ,浏览 器 对 象 模型 ) 。 





249| 











《HTML5+CSS3 Web 前 端 开 发 》 





window 对 象 是 整个 BOM 的 核心 ,所 有 其 他 对 象 和 集合 都 以 某 种 方式 与 window 对 
象 关联 ,如 图 8-6 所 示 。 


navigator ) | location document Screen 】 | history | 
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图 8-6 BOM 对 象 关系 图 
下 面 介绍 几 个 最 常用 对 象 的 含义 和 用 途 。 
1. document 对 象 
document 对 象 表示 网 页 文档 ,该 对 象 具有 很 多 集合 ,如 forms \links .images 等 ,分 别 
表示 网 页 中 所 有 的 表单 、 超 链接 和 图 像 等 集合 。 因 此 访问 表单 和 表单 中 的 元 素 可 以 使 用 
forms 集合 ,例如 : 


document .forms [0] .user.value; ”// 网 页 第 一 个 表单 中 name 属性 为 user 元 素 的 value 值 
document .forms["data"] .mail; // 名 称 为 data 的 表单 中 name 属性 为 mail 的 元 素 


document 对 象 还 具有 write 方法 ,用 来 向 网 页 中 动态 输出 文本 ,例如 : 


<script>document .write ("这 是 第 一 行 "+"<br />");:</script><!-- 在 网 页 中 输出 一 行文 
本 --> 


但 要 注意 的 是 ,document. write 方法 只 能 在 文档 尚未 载 入 到 浏览 器 时 输出 文本 ,如 
果 文 档 已 载 入 完毕 , 则 document. write 会 清空 当前 文档 内 容 再 输出 ,例如 (8-12. html) : 


<script> 
function msg(){ 
document .write("Hello!"); } // 输 出 时 会 清空 原 网 页 内 容 
</script> 
<p onclick="msg()">Click Here< /p> 


由 于 单 击 p 元 素 时 ,文档 内 容 已 载 入 完毕 ,所 以 单 击 时 , 原 网 页 内 容 会 被 清空 ,再 输出 
字符 串 " Hello!"。 因 此 ,document. write 方法 不 适合 于 在 程序 调试 时 输出 中 间 结 果 , 在 
JavaScript 中 ,这 个 任务 一 般 是 由 alert 方法 完成 。 

2. location 对 象 


location 对 象 表示 浏览 器 的 URL 地 址 ,该 对 象 主要 用 来 设置 或 分 析 浏 览 器 的 URL， 
使 浏览 器 发 生 转向 ,例如 要 使 浏览 器 跳 转 到 login. htm 页 面 ,代码 如 下 : 
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<script>1location.href="login.htm";</script> 


其 中 location. href 是 最 常用 的 属性 ,用 于 获得 或 设置 窗口 的 URL ,改变 该 属性 的 值 就 可 
以 导航 到 新 的 页 面 。 实 际 上 ,DW 中 的 跳 转 菜单 就 是 采用 下 拉 菜 单 结合 location. href 属 
性 实现 的 。 下 面 是 一 个 跳 转 菜单 的 代码 (8-13. html) : 


< select name =" select" onchange =" location. href = this. options [this. 
selectedIndex] .value"> 

<option> 请 选择 需要 的 网 址 < /option> 

<option value="http://www.sohu.com"> 搜 狐 </option> 

<option value="http://www.sina.com"> 新 浪 < /option> 
</select> 


如 果 不 希 望 跳 转 后 用 户 可 以 用 “后 退 " 按 钮 返回 原来 的 页 面 ,可 以 使 用 replace( ) 方 
法 ,该 方法 也 能 转 到 指定 的 页 面 ,但 不 能 返回 到 原来 的 页 面 了 ,这 常用 在 注册 成 功 后 禁止 
用 户 后 退 到 填写 注册 资料 的 页 面 。 例 如 : 


<p onclick="location.replace('http://www.sohu.com');"> 搜 狐 </p> 
可 以 发 现 转 到 新 页 面 后 ,“ 后 退 " 按 钮 是 灰色 的 了 。 
3。history 对 象 


history 对 象 主要 用 来 控制 浏览 器 后 退 和 前 进 。 它 可 以 访问 历史 页 面 ,但 不 能 获取 到 
历史 页 面 的 URL。 下 面 是 history 对 象 的 一 些 用 法 : 


history.back(); // 浏 览 器 后 退 一 页 ,等 价 于 history.go(-1); 
history.forward(); // 浏 览 器 前 进 一 页 ,等 价 于 history.go(1); 
history.go(0) 7 // 刷 新 当前 网 页 ,等 价 于 location.reload () 
document .write (history.length) // 输 出 浏览 历史 的 记录 总 数 


4. window 对 象 

window 对 象 对 应 浏览 器 的 窗口 ,使 用 它 可 以 直接 对 浏览 器 窗口 进行 各 种 操作 。 
window 对 象 提供 的 主要 功能 可 以 分 为 5 类 : 调整 窗口 的 大 小 和 位 置 ;打开 新 窗口 或 关闭 
窗口 ;产生 系统 对 话 框 ;状态 栏 控制 ;定时 操作 。 下 面 举 几 个 例子 (8-14. html) : 





window.open ("pop.html", "new", "width=400, height=300");  ”// 打 开 一 个 新 窗口 


window.moveTo (200, 300); // 移 动 窗口 到 指定 坐标 位 置 
window.close(); // 关 闭 当 前 窗口 
window.status=" 看 看 状态 栏 中 的 文字 变化 了 吗 ?"; // 修 改 状态 栏 内 容 
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5. 系统 对 话 框 


window 对 象 有 3 个 生成 系统 对 话 框 的 方法 ,分 别 是 alert([msg])、confirm([msg]) 
和 prompt([msg][，default]) 。 由 于 window 对 象 可 以 省 略 , 因 此 一 般 直接 写 方法 名 。 

(1) alert 方法 用 于 弹出 警告 框 ,在 框 中 显示 参数 msg 的 值 ,其 效果 如 图 8-1 所 示 。 

(2) confirm 方法 用 于 生成 确认 提示 框 ,其 中 包括 “确定 "和 “取消 ”按钮 。 当 用 户 单 击 
“确定 ”按钮 时 ,该 方法 将 返回 true; 单 击 * 取 消 ?按钮 时 , 则 返回 false, 其 效果 如 图 8-7 所 
示 , 代 码 (8-15. html) 如 下 : 


if (confirm(" 确 实 要 删除 吗 ?") ) // 弹 出 确认 提示 框 
alert ("图 片 正 在 删除 …"); 
else alert ("已 取消 删除 !") ; 


(3) prompt 方法 用 于 生成 消息 提示 框 , 它 可 接收 用 户 输入 的 信息 ,并 将 该 信息 作为 
函数 的 返回 值 。 该 方法 接收 两 个 参数 : 第 一 个 参数 是 显示 给 用 户 的 文本 ,第 二 个 参数 为 
文本 框 中 的 默认 值 (可 为 空 ), 其 效果 如 图 8-8 所 示 , 代 码 (8-16. html) 如 下 : 





var nInput=prompt ("请 输入 :\n 你 的 名 字 ",""); // 弹 出 消息 提示 框 
if (nInput!=nul1) // 如 果 用 户 输入 的 值 不 为 空 


document .write ("Hello! "+nInput); 


Dx 





图 8-7 确认 提示 框 confirm() 图 8-8 消息 提示 框 prompt() 


6. 定时 函数 


window 对 象 提供 了 两 个 定时 函数 .分别 是 setInterval() 和 setTimeout()。 定 时 函数 
是 JavaScript 制作 网 页 动画 效果 的 基础 ,例如 网 页 上 的 漂浮 广告 ,就 是 每 隔 几 毫秒 更 新 一 
下 漂浮 广告 的 显示 位 置 。 下 面 分 别 介绍 这 两 个 函数 。 

(1) setInterval() 函数 用 于 每 隔 一 段 时 间 执 行 指定 的 代码 。 需 要 注意 的 是 , 它 会 创建 
间隔 ID, 若 不 取消 将 一 直 执 行 ,直到 页 面 印 载 为 止 。 因此 如 果 不 需 要 了 应 使 用 
clearInterval 取消 该 函数 ,以 防止 它 占用 不 必要 的 系统 资源 。 

利用 setInterval() 周 期 性 地 执行 显示 当前 时 间 的 脚本 ,就 可 在 页 面 上 显示 不 停 走动 
的 时 钟 ,其 效果 如 图 8-9 所 示 ,代码 (8-17. html) 如 下 : 


<body onload= "init () "> 
<div id="clock"></div> 


<script> 





252| 











JavaScript 与 jQuery 基础 


var clock= document getElementById ("clock"); // 获 取 clock 元 素 
function disp(){ 
// 将 时 间 显示 在 clock 的 div 中 ,new Date() 获 取 系 统 时 间 , 并 转换 为 本 地 格式 
clock.innerHTMI="<b>"+ (new Date () ) .toLocaleString()+"</b>"; } 
function init(){ 
setInterval (disp, 1000); // 每 隔 1s 执行 一 次 disp() 1} 
</script>< /body> 





图 8-9 时 钟 显示 效果 


(2) setTimeout() 函 数 用 于 在 一 段 时 间 之 后 执行 指定 的 代码 ,这 可 用 于 某 些 需 要 延 
时 的 场合 。 如 果 通 过 递归 调用 ,该 函数 也 能 周期 性 地 执行 脚本 。 


8.5 jQuery 基础 


jQuery 是 一 个 快速 简洁 的 JavaScript 框架 , 它 可 以 简化 HTML 文档 的 元 素 选 取 , 事 
件 处 理 动画 及 Ajax 交互 ,快速 开发 Web 应 用 。 


8.5.1 jQuery 的 功能 和 使 用 


1. jQuery 的 功能 


jQuery 设计 的 目的 就 是 为 了 让 开发 人 员 简 化 JavaScript 代码 的 编写 ,jQuery 能 满足 
以 下 需求 ， 

(1) 取得 页 面 中 的 元 素 , 这 是 jQuery DOM 操作 的 基础 功能 。 

(2) 修改 页 面 元 素 的 外 观 , 这 主要 通过 修改 元 素 的 CSS 属性 或 HTML 属性 实现 。 

(3) 修改 页 面 的 内 容 ,jQuery 提供 了 html() 和 text 〇 0 等 函数 实现 这 一 功能 。 

(4) 响应 用 户 的 页 面 操作 ,jQuery 提供 了 完善 的 事件 绑 定 和 处 理 机 制 。 

(5) 为 页 面 添加 动态 效果 ,jQuery 的 这 一 功能 可 能 会 被 CSS3 取代 。 


2. 下 载 和 使 用 jQuery 


jQuery 官网 (http://jquery. com) 提供 了 最 新 版 本 的 jQuery 下 载 , 单 击 首页 上 的 
Download jQuery 即 可 下 载 。 通 常 只 需要 下 载 最 小 的 jQuery 包 (Minified) 即 可 。 目 前 最 
新 的 版 本 是 3. 2.1, 但 由 于 jQuery 各 种 版 本 不 完全 兼容 ,本 书 的 实例 仍 以 使 用 比较 广泛 
的 jquery-1. 11. min. js 为 开发 环境 。 

jQuery 是 一 个 轻 量 级 (Lightweight) 的 JavaScript 框架 ,所 谓 轻 量 级 ,是 说 它 根 本 不 
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需要 安装 ,因为 jQuery 实际 上 就 是 一 个 外 部 .js 文件 ,使 用 时 直接 将 该 . js 文件 用 二 script 二 
标记 链接 到 自己 的 页 面 中 即 可 ,代码 如 下 : 





<script src="jquery.min.js"></script> 


将 jQuery 框架 文件 引入 后 ,就 可 以 使 用 jQuery 的 选择 器 和 各 种 函数 功能 了 。 下 面 
是 一 个 最 简单 的 jQuery 程序 (8-18. html) : 


<script src="jquery.min.js"></script> <!-- 引 入 jQuery 环境 --> 
<script> 
$ (document) .ready (function () { // 等 待 DoM 文 档 载 入 后 执行 类 似 于 window.onload 
alert ("Hello World!"); // 弹 出 一 个 对 话 框 
D); 
</script> 


8.5.2 jQuery 中 的 “$” 


在 jQuery 中 ,最 频繁 使 用 的 莫 过 于 美元 符 “$ ”, 它 能 提供 各 种 各 样 的 功能 ,包括 选择 
页 面 中 的 元 素 ,作为 功能 函数 前 级 、 创 建 页 面 的 DOM 节点 等 。 

jQuery 中 的 “ $ ”等 同 于 “jQuery”, 例 如 $("h2") 等 同 于 jQuery(" h2"), 为 了 简写 ， 
一 般 采 用 $ " 代 蔡 “jQuery”。“$ ”的 功能 主要 体现 在 以 下 几 方 面 。 


1.“$ ”用 作 选 择 器 


在 CSS 中 ,选择 器 的 作用 是 选中 页 面 中 的 匹配 元 素 ,而 jQuery 中 的 “$ ”作为 选择 
器 ,同样 可 选中 匹配 的 单个 元 素 或 元 素 集 合 。 

例如 在 CSS 中 ,“h2>a" 表 示 选 中 h2 的 所 有 直接 下 级 元 素 a, 而 在 jQuery 中 同样 可 
以 通过 如 下 代码 选中 这 些 元 素 ,作为 一 个 对 象 数组 , 供 JavaScript 调用 。 


$ ("h2>a") //jQuery 的 子 选择 器 ,引号 不 能 省 略 
jQuery 支持 所 有 CSS3 的 选择 器 ,也 就 是 说 ,可 以 把 任何 CSS 选择 器 都 写 在 $("”") 


中 , 像 上 面 的 *h2 二 a" 这 种 子 选 择 器 本 来 IE6 是 不 支持 的 ,但 把 它 转换 成 jQuery 的 选择 器 
$("h2>a") 后 , 则 所 有 浏览 器 都 能 支持 。 例 如 下 面 的 CSS 代码 : 


h2>a{ /* IE 6 中 不 支持 的 子 选择 器 * / 
color: red; 


text- decoration: none; } 


可 将 它 改写 成 jQuery 选择 器 的 代码 ,代码 (8-19. html) 如 下 : 


<script src="jquery.min.js"></script> <!-- 引 入 jQuery 环境 --> 
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<script> 
$ (document) .ready (function (){ // 页 面 载 人 后 执行 
$'("h2>a") .css("color"; "Fed")s 
$ ("h2>a") .css ("textDecoration", "none"); 
Ds; 
</script> 


改写 后 , 则 使 得 本 来 不 支持 子 选 择 器 的 IE6 也 能 支持 子 选择 器 了 。 

使 用 jQuery 选择 器 设置 CSS 样式 需要 注意 两 点 : 

(1) CSS 属性 应 写成 JavaScript 中 的 形式 ,如 text-decoration 写成 textDecoration 。 
(2) 如 果 要 在 一 个 jQuery 选择 器 中 同时 设置 多 条 css 样式 ,可 以 写成 下 面 的 形式 : 


$ ("h2>a") .css({color:"red", textDecoration:"none"}); 


上 面 仅仅 展示 了 用 jQuery 选择 器 实现 CSS 选择 器 的 功能 ,实际 上 ,jQuery 选择 器 的 
主要 作用 是 选中 元 素 后 再 为 它们 添加 行为 。 例 如 : 


$ ("#buttonid") .click (function () { alert ("你 单 击 了 按钮 "); } 


这 就 是 通过 jQuery 的 id 选择 器 选中 了 某 个 按钮 ,接着 为 它 添加 单 击 时 的 行为 。 

还 可 以 通过 jQuery 选择 器 获取 元 素 的 HTML 属性 ,或 修改 HTML 属性 ,方法 
如 下 : 

$ ("a#somelink") .attr ("href"); // 获 取 元 素 的 href 属性 值 

$ ("a#somelink") .attr ("href", "dem.html"); // 将 元 素 href 属性 设置 为 dem.html 


2.“$ ”用 作 功 能 函数 前 组 


在 jQuery 中 ,提供 了 一 些 JavaScript 中 没有 的 函数 ,用 来 处 理 各 种 操作 细节 。 例 如 
$ .each() 函 数 , 它 用 来 对 数组 或 jQuery 对 象 中 的 元 素 进行 遍历 。 为 了 指明 该 函数 是 
jQuery 的 ,就 需要 为 它 添加 “$ .前 级 。 例 如 下 面 的 代码 (8-20. html) 在 浏览 器 中 结果 如 
图 8-10 所 示 。 


$ .each([1,2,3], function (index, value) { // 用 $ -each () 方 法 遍历 数组 [1,2, 3] 
document .write("<br>a["+index+"]="+value); }); 


alo=1 
al1}=2 
al2]=3 I 









图 8-10 $.each() 方 法 遍历 数组 
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说 明 : 

(1) $ .each() 函 数 用 来 遍历 数组 或 对 象 , 因 此 它 的 语法 有 如 下 两 种 形式 : 

QO $ .each( 对 象 , function( 属 性 , 属性 值 ){…)); 

@) $.each( 数 组 ,function( 元 素 序号 ,元素 的 值 ){…)》); 

$.each() 函数 的 第 1 个 参数 为 需要 遍历 的 对 象 或 数组 ,第 2 个 参数 为 一 个 函数 
function, 该 函数 为 集合 中 的 每 个 元 素 都 要 执行 的 函数 , 它 可 以 接收 两 个 参数 : 第 1 个 参 
数 为 数组 元 素 的 序号 或 者 是 对 象 的 属性 ,第 2 个 参数 为 数组 元 素 或 者 属性 的 值 。 

(2) 调用 $. each() 时 ,对 于 数组 和 类 似 数组 的 对 象 ( 具 有 length 属性 ,如 函数 的 
arguments 对 象 ) ,将 按 序号 从 0 到 length 一 1 进行 遍历 ,对 于 其 他 对 象 则 通过 其 命名 属性 
进行 遍历 。 

(3) 此 处 的 $.each() 函数 与 前 面 的 jQuery 方法 有 明显 的 区 别 , 上 节 中 的 jQuery 方 
法 都 需要 通过 一 个 jQuery 对 象 进行 调用 (如 $("#buttonid"). click) ,而 $.each() 函 数 
没有 被 任何 jQuery 对 象 所 调用 .这样 的 函数 称 为 jQuery 全 局 函数 。 

(4) $ .each() 函 数 不 同 于 each() 函 数 。 后 者 仅 能 用 来 遍历 jQuery 对 象 。 例 如 ,可 
以 利用 each() 方 法 配合 this 关键 字 来 批量 设置 或 获取 DOM 元 素 的 属性 。 

下 面 的 代码 (8-21. html) 首 先 利用 $("img") 获 取 页 面 中 所 有 img 元 素 的 集合 ,然后 
通过 each( ) 方 法 遍历 这 个 图 片 集合 。 通 过 this 关键 字 设置 页 面 上 4 个 空 一 img /二 元 素 
的 src 属性 和 title 属性 ,使 这 4 个 空 的 二 img /二 标记 显示 图 片 和 提示 文字 。 运 行 效果 如 
图 8-11 所 示 。 


$ (function (){ //$ (document) .ready (function () {的 缩写 形式 
$ ("img") .each (function (i){ //each () 函数 便利 img 元 素 的 集合 
this.src="pic"+ (i+1)+".jpg"; //this 等 价 于 $ ("img") [n] 


this.title=" 这 是 第 "+ (i+1)+" 幅 图 "; 
WD Ns 
<img /><img /><img /><img /> <!-- 用 each 方法 设置 它们 的 属性 --> 


司 。。chO 方 法 - mWicresoft Ianteraet ELSEEE 


| 文件 和 ) 编辑 人 E) 查看 WW) 收藏 人 工具 上 帮助 0 








8-11 each() 方 法 


提示 : 代码 中 的 this 指 代 的 是 DOM 对 象 而 非 jQuery 对 象 , 如 果 想 得 到 jQuery 对 
象 ,可 以 用 $$ (this) 。 
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3. 用 作 $ (document). ready() 解 决 window. onload 函数 冲突 


在 jQuery 中 ,采用 $ (document). ready() 函数 蔡 代 了 JavaScript 中 的 window 
. onload 困 数 。 

其 中 (document) 是 指 整 个 网 页 文档 对 象 ( 即 JavaScript 中 的 window. document 对 
象 ) ,那么 $ (document). ready 事件 的 意思 是 : 在 文档 对 象 就 绪 的 时 候 触发 。 

$ (document). ready() 不 仅 可 以 替代 window. onload 函数 的 功能 ,而 且 比 window 
. onload 函数 还 具有 很 多 优越 性 ,下面 分 析 两 者 的 区 别 。 

例如 ,要 将 id 为 loading 的 图 片 在 网 页 加 载 完成 后 隐藏 起 来 , window. onload 的 写 
法 是 ， 


function hide (){ 
document .getElementById ("loading") .style.display= "none";} 
window.onload=hide; // 注 意 hide 不 能 写成 hide () 


由 于 window. onload 事件 会 使 hide() 函数 在 页 面 ( 包 括 HTML 文档 和 图 片 等 其 他 
文档 ) 完 全 加 载 完毕 后 才 开始 执行 ,因此 在 网 页 中 id 为 loading 的 图 片 会 先 显示 出 来 ,等 
整个 网 页 加 载 完 成 后 执行 hide 函数 才 会 隐藏 。 而 jQuery 的 写法 是 : 


$ (document) .ready (function(){ 
("#1loading") .css ("display", "none"); 


]) 


首先 ,jQuery 的 写法 会 使 页 面 仅 加 载 完 DOM 结构 后 就 执行 ( 即 加 载 完 HTML 文档 
后 ) ,还 没 加 载 图 像 等 其 他 文件 就 执行 ready() 函数 ,给 图 像 添加 “display:none” 的 样式 ， 
因此 id 为 “loading” 的 图 片 不 可 能 被 显示 。 

所 以 说 , $ (document). ready() 比 window. onload 载 人 执行 更 快 。 

其 次 ,如果 该 网 页 的 html 代码 中 没有 id 为 loading 的 元 素 ,那么 window. onload 函 
数 中 的 getElementById("loading") 会 因 找 不 到 该 元 素 , 导致 浏 览 器 报错 。 所 以 为 了 容 
错 , 最 好 将 代码 改 为 : 


function hide (){ 
if (document .getElementById ("loading")){ 

document .getElementById("loading") .style.display= "none"; 
}} 


而 jQuery 的 $ (document). ready() 则 不 需要 考虑 这 个 问题 ,因为 jQuery 已 经 在 其 
封装 好 的 ready() 函数 代码 中 做 了 容错 处 理 。 

最 后 ,由 于 页 面 的 HTML 框架 需要 在 页 面 完 全 加 载 后 才能 使 用 ,因此 在 DOM 编程 
时 window. onload 函数 被 频繁 使 用 。 倘 若 页 面 中 有 多 处 都 需要 使 用 该 函数 ,将 会 产生 冲 
突 。 而 jQuery 采用 ready() 方 法 很 好 地 解决 了 这 个 问题 , 它 能 够 自动 将 其 中 的 函数 在 页 
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面 加 载 完 成 后 运行 ,并 且 在 一 个 页 面 中 可 以 使 用 多 个 ready() 方 法 ,不 会 发 生 冲 突 。 

总 之 ,jQuery 中 的 $ (document). ready() 图 数 有 以 下 3 大 优点 : 

。 在 DOM 文档 载 人 后 就 执行 ,而 不 必 等 待 图 片 等 文件 载 入 ,执行 速度 更 快 ; 

。 如 果 找 不 到 DOM 中 的 元 素 ,能 够 自动 容错 ; 

。 在 页 面 中 多 个 地 方 使 用 ready() 方 法 不 会 发 生 冲 突 。 

4. 创建 DOM 元 素 

在 jQuery 中 通过 使 用 *$ ”可 以 直接 创建 DOM 元 素 ,下 面 的 代码 (8-22. html) 用 于 
创建 一 个 段落 ,并 设置 其 align 属性 以 及 段落 中 的 内 容 。 


var newP=$ ("<p align= 'center'> 王 船山 诞 展 400 周年 < /p>"); 


这 条 代码 等 价 于 如 下 的 JavaScript 代码 : 


Var newP=document .createElement ("p"); 
var text=document .createTextNode (" 王 船山 诞辰 400 周年 ") 


newP.appendChild (text); 


可 以 看 出 ,用 “$ ”创建 DOM 元 素 比 JavaScript 要 方便 得 多 。 但 要 注意 的 是 ,创建 了 
DOM 元 素 后 ,还 要 用 下 面 的 方法 将 该 元 素 插入 到 页 面 的 某 个 具体 位 置 上 ,和 否则 浏览 器 不 
会 显示 这 个 新 创建 的 元 素 。 


newP .insertAfter ("#chapter"); // 将 newP 元 素 插入 到 #chapter 元 素 之 后 


8.5.3 jQuery 对 象 与 DOM 对 象 


当 使 用 jQuery 选择 器 选中 某 个 或 某 组 元 素 后 ,实际 上 就 创建 了 一 个 jQuery 对 象 ， 
jQuery 对 象 是 通过 jQuery 包装 DOM 对 象 后 产生 的 对 象 ,但 jQuery 对 象 和 DOM 对 象 
是 有 区 别 的 。 例 如 : 


$ ("#qq) .html () 7 // 获 取 ia 为 qq 的 元 素 内 的 html 代码 


这 条 代码 等 价 于 : 


document .getElementById ("gq") .innerHTML; 


1. jQuery 对 象 转换 成 DOM 对 象 

也 就 是 说 ,如 果 一 个 对 象 是 jQuery 对 象 ,那么 它 就 可 以 使 用 jQuery 中 的 方法 ,例如 
html() 就 是 jQuery 中 的 一 个 方法 。 但 jQuery 对 象 无 法 使 用 DOM 对 象 中 的 任何 方法 ， 
同样 DOM 对 象 也 不 能 使 用 jQuery 中 的 任何 方法 。 因 此 下 面 的 写法 都 是 错误 的 。 
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$ ("#qq) -innerHTML7 // 错 误 写 法 
document .getElementById ("qq") -html (); // 错 误 写 法 


但 如 果 jQuery 没有 封装 想 要 的 方法 ,不 得 不 使 用 DOM 方法 的 时 候 , 有 如 下 两 种 方 
法 将 jQuery 对 象 转换 成 DOM 对 象 。 

(1) jQuery 对 象 是 一 个 数组 对 象 ,可 以 通过 添加 数组 下 标的 方法 得 到 对 应 的 DOM 
对 象 ,例如 ,$$ ("#msg")[0], 就 将 jQuery 对 象 转变 成 了 一 个 DOM 对 象 。 

(2) 使 用 jQuery 中 提供 的 get() 方 法 得 到 相应 的 DOM 对 象 ,例如 , $ ("#msg") 
.get(0) 。 

下 面 是 一 些 jQuery 对 象 转换 为 DOM 对 象 的 例子 : 


$ ("#msg") [0] .innerHTML; // 添 加 下 标 转换 成 DoM 对 象 
$ ("h2>a") .eq(0) [0] .innerHTML; // 添 加 下 标 转换 成 DOM 对 象 
$ ("h2>a") .get (0) .innerHTML; //get (n) 方 法 直接 返回 poM 对 象 


2. DOM 对 象 转换 成 jQuery 对 象 


相应 地 ,DOM 对 象 也 可 以 转换 成 jQuery 对 象 ,只 需要 用 $ () 把 DOM 对 象 包装 起 
来 就 可 以 获得 一 个 jQuery 对 象 ,从 而 能 使 用 jQuery 中 的 各 种 方法 ,例如 : 


$ (document .getElementById ("msg")) .htm]l (); //ijQuery 对 象 
$ ("#msg") .html () 7 //jQuery 对 象 
$ ("h2>a") .eq(0) .html (); //eq n) 方 法 返回 的 仍然 是 jQuery 对 象 


3. jQuery 对 象 的 链 式 操作 


jQuery 对 象 的 一 个 显著 优点 是 支持 链 式 操作 。 所 谓 链 式 操作 ,是 指 基于 一 个 jQuery 
对 象 的 多 数 操作 将 返回 该 jQuery 对 象 本 身 , 从 而 可 以 直接 对 它 进 行 下 一 个 操作 。 例 如 ， 
对 一 个 jQuery 对 象 执行 大 多 数 方法 后 将 返回 jQuery 对 象 本 身 , 因 此 ,可 以 对 返回 的 
jQuery 对 象 继续 执行 其 他 方法 。 下 面 是 一 个 例子 (8-23. html) 。 


$ (function (){ //$ (document) .ready (function () {的 简写 形式 
$ ("p") .click (function() {alert ($ (this) .html ())}) // 设 置 click 事 件 的 处 理 函 数 
.mouseover (function () {alert ('mouse over event')}) // 设 置 mouseover 事件 的 处 理 函数 
.text ($ ("p") .eq(0) .text ()+" 好 啊 ") // 设 置 元 素 中 的 文本 内 容 
.each (function (i) {this.style.color=["'#£00"', "#0f0', '#00£'][ 主 ] 

// 设 置 前 3 个 元 素 的 颜色 
]) 让 
<p id= "jp"> 移 进来 !< /p><p id= "jp2"> 移 进来 !< /p><p> 移 进来 !</p> 


显然 ,通过 上 述 链 式 操作 ,可 以 避免 不 必要 的 代码 重复 ,使 jQuery 代码 非常 简洁 。 其 
中 ['#f00','# 0f0','# 00 仆 是 一 个 JavaScript 数组 ,给 数组 加 下 标 就 能 得 到 该 数组 中 的 某 
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个 元 素 。. text($$("p").eq(0).text() 十 "好 啊 ") 表 示 设 置 选中 元 素 的 文本 内 容 为 第 一 个 
p 元 素 的 文本 内 容 再 连接 一 个 字符 串 常量 。 


8.5.4 jQuery 的 选择 器 


要 使 某 个 动作 应 用 于 特定 的 HTML 元 素 , 需 要 有 办 法 找到 这 个 元 素 。 在 jQuery 中 ， 
执行 这 一 任务 的 方法 称 为 jQuery 选择 器 。 选 择 器 是 jQuery 的 根基 ,在 jQuery 中 ,对 事 
件 处 理 . 遍 历 DOM 和 Ajax 操作 都 依赖 于 选择 器 。 因 此 很 多 时 候 编写 jQuery 代码 的 关 
键 就 是 怎样 设计 合适 的 选择 器 选中 需要 的 元 素 。jQuery 选择 器 把 网 页 的 结构 和 行为 完 
全 分 离 。 利 用 jQuery 选择 器 ,能 快速 地 找 出 特定 的 HTML 元 素 并 得 到 一 个 jQuery 对 
象 ,然后 就 可 以 给 对 象 添加 一 系列 的 动作 行为 。 

jQuery 的 选择 器 主要 有 3 大 类 , 即 CSS3 的 基本 选择 器 .CSS3 的 位 置 选择 器 和 过 滤 

1. 基本 选择 器 

包括 标记 选择 器 、 类 选择 器 ,id 选择 器 .通配符 、 交 集 选 择 器 .并 集 选 择 器 。 写 法 就 是 
把 原来 的 CSS 选择 器 写 在 $("") 内 ,例如 : 

$ ("Pp") S$ ("cl") .S$ ("#one") .$ ("¥").$ ("Pp.c1") .S$ ("hl1, #one") 

如 果 选 择 器 选择 的 结果 是 元 素 的 集合 , 则 可 以 用 eq(n) 来 选择 集合 中 的 第 n 十 1 个 元 
素 , 例 如 ,要 改变 第 一 个 p 元 素 的 背景 色 为 红色 ,可 用 下 面 的 代码 : 


$ ("p") .eq(0) .css ("backgroundColor", "red"); //eq(0) 选 择 集合 中 的 第 1 个 元 素 


提示 : jQuery 中 没有 伪 类 选择 器 (如 玉 :hover) ,但 提供 了 hover() 方 法 模拟 该 功能 。 
2. 层次 选择 器 
包括 后 代 选 择 器 、 子 选择 器 、 相 邻 选择 器 、 见 弟 选 择 器 ,例如 : 


$ ("#one p").$ ("#one>p")、$ ("hl+p").、$ ("hl~p")。 


其 中 ,兄弟 选择 器 (如 $("hl 一 p")) 和 相 邻 选择 器 (如 $("hl 十 p")) 都 只 能 选中 元 素 
后 面 的 兄弟 元 素 。 如 果 要 选中 某 个 元 素 前 面 和 后 面 的 兄弟 元 素 , 可 以 使 用 jQuery 中 的 
siblings() 方 法 , 它 的 选取 范围 与 前 后 位 置 无 关 , 只 要 是 同辈 元 素 就 可 以 选取 。 


3. 反 向 过 滤 选 择 器 


在 过 滤 选 择 器 中 :not(filter) 是 一 个 很 有 用 的 选择 器 ,其 中 filter 可 以 是 任意 其 他 的 
位 置 选择 器 或 过 滤 选 择 器 。 例 如 ,要 选中 input 元 素 中 的 所 有 非 radio 元 素 ,选择 器 如 下 : 
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$ ("input:not (:radio)") 
选中 页 面 中 除 第 一 个 p 元 素 外 的 所 有 p 元 素 , 可 以 这 样 : 
$ ("p:not (:first)") 


需要 注意 的 是 , :not(filter) 的 参数 filter 只 能 是 位 置 选择 器 或 过 滤 选 择 器 ,而 不 能 是 
基本 选择 器 ,例如 下 面 是 一 个 典型 的 错误 : 





$ ("div:not (p:first)") 


8.5.5 jQuery 的 事件 绑 定 


在 jQuery1.7 以 上 版 本 中 ,提供 了 on() 方 法 ,用 于 绑 定 事件 处 理 程序 到 当前 选 定 的 
jQuery 对 象 中 的 元 素 。on() 方 法 提供 了 绑 定 事 件 处 理 程序 所 需 的 所 有 功能 ,因此 官方 使 
用 on() 方 法 取缔 了 1.7 以 前 版 本 中 的 bind() live() 和 delegate() 方 法 。 

下 面 是 一 个 实例 (8-24. html) , 当 单 击 btn 按钮 时 ,div 中 会 添加 一 个 p 元素 。 

<script> 

$ ("div") .on("click", "#btn", function(){ 

$ ("qiv") .append ("<p> 这 是 一 个 新 的 p 元 素 </p>"); 1) 
</script> 

<div><button id= "btn"> 添 加 新 的 p 元 素 </button> 

<p> 第 一 个 p 元 素 </p> <p> 第 二 个 p 元 素 </p> 

</div> 


on() 方 法 最 多 可 以 有 4 个 参数 ,分 别 是 事件 名 、 选 择 器 ,发 送 的 数据 事件 处 理 函 数 ， 
其 语法 如 下 : 

.on (levents [, selector ] [, data ], handler (eventObject)) 

如 果 事 件 比 较 简单 ,也 可 直接 写 事件 处 理 函 数 ,例如 上 例 中 的 js 代码 等 价 于 如 下 
代码 : 

$ ("#btn") .click (function (){ 

$ ("div") .append ("<p> 这 是 一 个 新 的 pp 元 素 </p>"); 1); 

在 需要 为 较 多 的 元 素 绑 定 事件 的 时 候 , 应 优先 考虑 on() 方 法 事件 委托 ,这 可 以 带 来 
性 能 上 的 好 处 。 比 如 下 面 的 代码 (8-25. html) 为 页 面 上 所 有 p 元 素 统一 绑 定 了 3 个 事件 。 





$ ("p").on({ 
mouseover:function() {$ (this) .css ("background- color", "lightgray");}, 


mouseout :function() {$ (this) .css ("background- color", "lightblue");}, 





261 











《HTML5+CSS3 Web 前 端 开 发 》 





click:function () {$ (this) .css ("background- color", "yellow");} 
nD; 


8.5.6 jQuery 中 的 常用 方法 
下 面 介绍 几 种 jQuery 中 最 常 使 用 的 方法 。 
1. findO 〇 方法 
find() 方 法 可 以 通过 查询 获取 新 的 元 素 集合 ,通过 匹配 选择 器 来 筛选 元 素 , 例 如 : 
$("div") .find("p") 7 
这 条 代码 表示 在 所 有 div 元 素 中 搜索 p 元 素 ,获得 一 个 新 的 元 素 集合 , 它 完 全 等 同 于 
以 下 代码 : 


$ ("p",$ ("div")); 


2. hover() 方 法 
hover(fn1,fn2): 一 个 模仿 悬 停 事 件 (鼠标 移 人 然后 移出 某 个 对 象 ) 的 方法 。 当 鼠标 


移 和 人 到 一 个 匹配 的 元 素 上 面 时 ,会 触发 指定 的 第 一 个 函数 ; 当 鼠 标 移出 这 个 元 素 时 ,会 触 
发 指定 的 第 二 个 函数 。 下 面 的 代码 (8-26. html) 利 用 hover() 方 法 实现 当 鼠 标 滑动 到 某 个 


单元 格 上 ,单元 格 发 








<style> .hover{background- color: #9CF;}</style> 

<script src="jquery.min.js"></script> 

<script> 

$ (document) .ready (function (){ 

$ ("td") .hover( // 使 用 hover 方法 ,接收 两 个 参数 
function(){ $ (this) .addclass ("hover");}, 
function(){ $ (this) .removeClass ("hover"); 
D; Ds; 

</script> 


3. toggleclass() 方 法 


toggleclass() 方 法 用 于 切换 元 素 的 样式 。 选 中 的 元 素 集合 中 的 元 素 如 果 没 有 使 用 样 


式 class, 则 对 该 元 素 加 入 样式 class; 如 果 已 经 使 用 了 该 样式 , 则 从 该 元 素 中 删除 该 样式 。 
可 以 将 上 述 单 元 格 变色 的 代码 用 toggleclass() 方 法 改写 ,代码 (8-27. html) 如 下 : 
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$ (document) .ready(function (){ 

$ ("td") .hover( 
function() { $ (this) .toggleClass ("hover"); J}, // 如 果 没 有 hover 类 则 添加 
function(){ $ (this) .toggleClass ("hover"); }); }); 


8.5.7 jQuery 应 用 举例 


1. 带动 画 效 果 的 “返回 顶部 ”按钮 


jQuery 提供 了 一 些 方法 用 来 实现 动画 效果 ,其 中 fadeIn 和 fadeOut 方法 可 实现 淡 入 
淡出 效果 的 动画 。 下 面 的 代码 (8-28. html) 是 “ 回 到 顶部 ”的 程序 ,如 图 8-12 所 示 , 当 单 击 
回 到 顶部 图 标 时 ,页面 逐渐 滚动 到 顶部 ,并 且 当 页 面 回 到 顶部 时 , 回 到 顶部 图 标 以 淡出 方 
式 消失 ; 当 页 面 滚动 到 下 方 时 ,又 会 以 淡 入 方式 显示 回 到 顶部 图 标 。 


#totop { 
position: fixed; width:64px; height:64px;bottom: 10%; right: 16px; 
z-index: 99; 
display:none; /* 初始 时 不 显示 #* / } 
<a href="javascript:void(0)" id="totop"><img src="images/toTop.gif"></a> 
<script> 
$ (function(){ 
$ (window) .scroll (function(){ 
if($ (window) .scrollTop()>500) // 如 果 网 页 滚动 超过 了 500px 
$ ("#totop") .fadeIn (500); // 显 示 返 回 项 部 按钮 
else $ ("#totop") .fadeOut (500); 
1D);1) 
$ ("#totop") .click (function(){ 
if($ ("html") .scrollTop()){ // 如 果 网 页 的 scrollTop 值 不 为 0 
$ ('html') .animate({ scrollTop: 0 }, 1000); return false; } 
$ ('body') .animate({ scrollTop: 0 }, 1000); return false; 
D); 
</script> 


站 人 项 交 果 x 
e 3 © Dfile:///E:/MOOC/totop.html 
$ CHbtn”). click (functionO { $ (“div”). append(” 


这 是 一 个 新 的 p 元 素 


“) ; ;在 需要 为 较 多 的 元 素 绑 定 事件 的 时 候 ， 应 优先 考 
虑 or 方法 事件 委托 ， 这 可 以 带 来 性 能 上 的 好 处 。 比 如 下 面 
的 代码 为 页 而 上 所 有 p 元 素 统一 绑 定 了 3 个 事件 。 


javaseript: yoid(D) 





图 8-12 回 到 顶部 效果 
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2. 图 片 滚动 栏 


如 图 8-13 所 示 的 图 片 滚动 栏 在 各 种 网 站 上 经 常 可 看 到 ,具有 较 高 的 实用 价值 。 制 作 
图 片 滚动 栏 的 思路 是 : 把 所 有 图 片 项 组 织 成 一 个 无 序列 表 , 则 每 个 列表 项 li 元 素 就 表示 
一 个 图 片 项 ,对 元 素 设置 浮动 ,使 所 有 图 片 项 水 平 排列 。 设 置 ul 元 素 的 宽度 等 于 或 大 
于 所 有 要 滚动 的 图 片 的 宽度 之 和 (使 所 有 图 片 不 换行 ), 再 在 ul 外 包 右 一 个 div 元 素 , 设 
置 该 div 的 溢出 属性 为 隐藏 。 结 构 代码 (8-29. html) 如 下 : 


<div class="gallery"> 

<ul class="piclist"> 
<li><a href="#"><img src="uploads/1.jpg"></a><span> 第 十 届 ……</span></1i> 
<li><a href="#"><img src="uploads/2.jpg"></a><span> 获 奖 人 员 < /span></1i> 


<li><a href="#"><img src="uploads/5.jpg"></a><span> 第 二 届 …… </span></1i> 
</ul> </div> 











第 十 届 大 学 生 结 构 设计 竟 赛 … 获奖 人 员 ”滚动 ”第 二 届 实 体 建构 竞赛 现场 图 `， 第 二 届 实 体 建构 竞赛 现场 图 … 








图 8-13 图 片 滚动 栏 


CSS 样式 代码 如 下 : 
.gallery {height: 170px; margin: 14px 0 0 15px; /* 定义 高 度 和 间 院 * / 

overflow: hidden; } /* 设 置 洲 出 隐藏 ,这 是 关键 * / 
.gallery ul { width:1000px; } /* 设置 宽度 大 于 所 有 图 片 宽 的 和 ,保证 水 平 排列 * / 


.gallery ul li { 

width: 180px; height: 170px; margin- right: 15px; 

float: left; } /* 设 置 每 个 图 片 项 水 平 排列 * / 
.gallery ul.piclist li a {width: 170px; height: 133px; display: block; 

border: lpx solid #ddd; padding: 4px;} /* 为 图 片 添加 边框 和 填充 * / 
.galleryul li a img{width:170px; height:133px; 

display:block; border:0;} /* 确保 在 IE8 下 图 片 没 有 默认 边框 * / 

.gallery ul li span{line- height:27px; text-align:center; 
color:#2a2a2a; display:block;font-size:14px; /* 下 面 3 条 设置 文本 自动 隐藏 * / 
text- overflow:ellipsis;white- space:nowrap; overflow:hidden; } 
.gallery ul li a:hover{ border:lpx solid #5abfff} ”/*hover 时 改变 边框 颜色 */ 


.gallery ul 1i span:hover{ color:#F60; text- decoration:none; cursor:pointer} 














JavaScript 与 jQuery 基础 


最 后 ,添加 jQuery 代码 ,使 图 片 滚动 栏 能 滚动 起 来 。 代 码 如 下 : 


<script src="js/jquery.min.js"></script> 
<script> 
function autoScroll (obj){ 
$ (obj) .find ("ul") .animate ({ 
marginLeft : "一 191Px" 
},400, function(){ 
$ (this) .css({marginLeft : "0px"}) .find ("li:first") .appendTo (this); 
1 2 
$ (function(){ setInterval('autoScroll(".gallery")'v3000): }) 
</script> 


习 题 


1. 计算 一 个 数组 x 的 长 度 的 语句 是 ( Wa 
A. var aLen=x. length(); B. var aLen=x. len(); 
C. var aLen=x. length; D. var aLen=x. len; 


2. 下 列 JavaScript 语句 将 显示 ( ) 结 果 。 





var al=10; Var a2=20; alert ("al+a2="+al+a2)7 
A. al 十 a2 王 30 B. al 十 a2 王 1020 
C. al 十 a2 王 al 十 a2 D. "al 十 a2 一 "1020 
3. 表达 式 "123abc" 一 123 的 计算 结果 是 (  )。 
A. "abc" B. 0 C. —122 D. NaN 
4. 产生 当前 日 期 的 方法 是 ( Ws 
A. Now(); B. date(); C. new Date(); D. new Now(); 


5. 下 列 ( ) 可 以 得 到 文档 对 象 中 的 一 个 元 素 对 象 。 
A，document. getElementById(" 元 素 id 名 ") 
B，document. getElementByName(" 元 素 名 ") 
C. document. getElementByTagName(" 标 记名 ") 
D. 以 上 都 可 以 
6. 如 果 要 改变 元 素 二 div id="userInput" 二 … 一 /div 二 的 背景 颜色 为 蓝 色 ,代码 是 
) 。 
A. document. getElementById("userInput"). style. color 一 "blue"; 
B. document. getElementByld("userInput"). style. divColor= "blue"; 
C. document. getElementByld("userInput"). style. background-color= "blue"; 
D. document. getElementByld("userInput"). style. backgroundColor= "blue"; 
7. 通过 innerHTML 的 方法 改变 某 一 div 元 素 中 的 内 容 ,( )。 
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A. 只 能 改变 元 素 中 的 文字 内 容 B. 只 能 改变 元 素 中 的 图 像 内 容 
C. 只 能 改变 元 素 中 的 文字 和 图 像 内 容 ” D. 可 以 改变 元 素 中 的 任何 内 容 
8. 下 列 选项 中 ,( ”) 不 是 网 页 中 的 事件 。 








A. onclick B. onmouseover C. onsubmit D. onmouseclick 
9. JavaScript 中 自 定义 对 象 时 使 用 关键 字 ( )s 
A. Object B. Function 
C. Define D. 以 上 3 种 都 可 以 
10. 以 下 哪 条 语句 不 能 为 对 象 obj 定义 值 为 22 的 属性 age? ( ) 
A. obj. "age" 一 22; B. obj. age 一 22; 
C. obj["age"] 王 22; D. obj={age:22}; 
11. 下 面 哪 一 条 语句 不 能 定义 函数 {0? ( 。 ) 
A. function {O00){); B. var {=new Function("{}"); 
C. var {=function(){); D. {0{}; 
12. 对 象 表示 浏览 器 的 窗口 ,可 用 于 检索 关于 该 窗口 状态 的 信息 。 
13. 对 象 表示 浏览 器 的 URL 地 址 ,并 可 用 于 将 浏览 器 转 到 某 个 网 址 。 
14. var a=10; var b=20; var c=10; alert(a=b); alert(a == b); alert(a == 








c) ;的 运行 结果 是 什么 ? 
15. 试 说 明 以 下 代码 输出 结果 的 顺序 ,并 解释 其 原因 ,最 后 在 浏览 器 中 验证 。 


<script> setTimeout (function(){ alert("A"); },0); 
alert ("B"); </script> 


16. 编写 代码 实现 以 下 效果 : 打开 一 个 新 窗口 ,原始 大 小 为 400X300px, 然 后 将 窗口 
逐渐 增 大 到 600X450px', 保 持 窗口 的 左上 角 位 置 不 变 。 

17. jQuery 中 的 html() 和 text() 方 法 有 何 区 别 ? html(val) 和 text(val) 方 法 有 何 
区 别 ? 

18. 写 jQuery 代码 ,给 网 页 中 所 有 的 二 p 二 元 素 添 加 onclick 事件 。 当 单 击 时 弹出 
该 p 元 素 中 的 内 容 。 

19. 对 于 网 页 中 的 所 有 所 p 过 元素 , 当 第 1 次 单 击 时 弹出 “您 是 第 一 次 访问 ”, 当 以 后 
每 次 单 击 时 则 弹出 “欢迎 您 再 次 访问 ”, 请 用 jQuery 代码 实现 。 
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虽然 使 用 CSS3 的 媒体 查询 ` 流 式 布局 等 技术 可 以 直接 制作 响应 式 网 页 ,但 必须 分 别 
设计 不 同 屏幕 大 小 下 的 页 面 CSS 样式 效果 ,代码 比较 烦琐 。 为 此 ,开发 者 通常 借助 
Bootstrap 框架 进行 响应 式 网 页 设计 。 


9.1 Bootstrap 的 使 用 


Bootstrap 是 由 Twitter( 著 名 的 美国 社交 网 站 ) 的 两 名 前 员工 推出 的 前 端 开 发 框架 ， 
它 基 于 HTML、CSS、JavaScript 和 jQuery 等 前 端 技术 ,2011 年 8 月 在 GitHub 上 发 布 ， 
一 经 推出 就 备 受 欢迎 。 

Bootstrap 内 置 了 非常 多 的 网 页 组 件 和 漂亮 样式 ,只 要 在 HTML 元 素 中 调用 相关 的 
类 名 就 可 使 用 这 些 组 件 和 样式 ,而 无 须 编写 CSS 代码 ,从 而 减少 了 代码 的 编写 ,提高 了 网 
站 的 开发 效率 。 实 际 上 ,即使 是 普通 的 非 响 应 式 网 站 也 能 使 用 Bootstrap 来 开发 。 

另 一 方面 ,Bootstrap 还 内 置 了 一 套用 于 网 页 布局 的 栅 格 系统 ,利用 该 系统 可 直接 在 
网 页 上 绘制 行 和 列 来 进行 网 页 布局 ,这 不 仅 使 开发 者 免 于 编写 CSS 布局 代码 ,而 且 这 套 
栅 格 系统 是 响应 式 优先 的 ,也 就 是 说 ,该 栅 格 系统 生成 的 网 页 布局 代码 能 自 适应 各 种 尺寸 
的 屏幕 。 

基于 此 ,Bootstrap 成 为 目前 最 流行 的 前 端 开 发 框架 。Bootstrap 还 具有 以 下 几 个 
优势 : 


移动 设备 优先 一 一 从 Bootstrap 3. 0 版 本 起 ,移动 设备 优先 的 样式 贯穿 于 整个 库 ; 
浏览 器 支持 一 一 Bootstrap 具有 良好 的 浏览 器 兼容 性 ,主流 浏览 器 都 支持 
Bootstrap 。 

响应 式 设计 一 一 Bootstrap 的 响应 式 CSS 能 够 自 适 应 台式 机 、 平 板 电 脑 和 手机 的 
屏幕 。 

组 件 丰富 一 一 Bootstrap 包含 了 很 多 功能 强大 的 内 置 组 件 。 

良好 的 编码 规范 一 一 为 开发 人 员 创 建 接口 提供 了 一 个 简洁 、 统 一 的 解决 方案 , 减 
少 了 代码 编写 量 , 使 开发 人 员 站 在 巨人 的 肩膀 上 ,不 做 重复 工作 。 


9.1.1 下 载 和 引用 Bootstrap 框架 


1. 下 载 Bootstrap 


Bootstrap 的 中 文官 方 网 站 是 : www. bootcss. com。 访 问 该 网 站 , 单 击 "Bootstrap3 
中 文 文档 ”按钮 ,再 单 击 “ 下 载 Bootstrap” 按 钮 ,就 会 进入 Bootstrap 下 载 页面 , 选 择 “ 用 于 
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生产 环境 的 Bootstrap” 下 载 即 可 。 目 前 Bootstrap 最 新 的 正式 版 为 3. 3.7, 该 版 本 压缩 文 
件 大 小 为 362KB。 

需要 注意 的 是 ,Bootstrap 的 老 版 本 “2. X 版 本 ”和 现在 的 “3.X 版 本 ”完全 不 兼容 。 

将 下 载 的 zip 文件 解压 后 ,将 看 到 下 面 的 文件 和 目录 结构 ,如 图 9-1 所 示 。 


website/ 7/ 网 站 根 目录 


CssA 








bootstrap -css 7Z/Bootstrap 定 义 的 Css 样式 
bootstrap-min.css ” /VCSS 文 件 的 压缩 版 本 
bootstrap-thene-css //Bootstrap 定 义 的 主题 的 CSS 样 式 
bootstrap-thene .nin.css 

bootstrap-thene .nin.css.nap 
































/ 
bootstrap -js /YBootstrap 的 js 代码 
bootstrap -min.js 
fonts7 7/ 字体 图 标 文件 目录 


图 9-1 Bootstrap 的 目录 结构 


2. 在 网 站 中 引入 Bootstrap 


在 网 站 中 引入 Bootstrap 只 需 如 下 两 步 。 第 一 步 ,将 zip 压缩 包 解 压 后 的 3 个 文件 夹 
(css\js 和 fonts) 复 制 到 网 站 根 目录 下 ,我 们 需要 的 主要 是 它 的 样式 预定 义 文件 
(bootstrap. min, css) ,js 文件 (bootstrap. min. js) 和 fonts 目录 ,其 他 文件 都 可 删除 。 由 于 
Bootstrap 的 js 代码 是 基于 jQuery 的 ,因此 还 要 将 jquery. min. js 文件 放 在 网 站 目录 下 
(建议 放 在 js 目录 下 ) 。 

第 二 步 , 在 HTML 文件 中 引入 Bootstrap ,一 个 引入 了 Bootstrap 的 HTML 文件 (9- 
1. htmD) 代 码 如 下 : 


< IDOCTYPE html> 


<html> 

<head> 
<meta charset="utf- 8"> = 
<meta http-equiv="X- UA- Compatible" content="IE=edge"> 


<!--@--> 
<meta name= "viewport" content="width= devicetWi 八 hr Ynitial- scale=1"> 
<title> 引 入 Bootstrap 的 HTML 标准 模板 < /title> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<!-- 引 入 Bootstrap CSS 样式 --> 
<!-- 此 处 可 引入 或 插入 自己 编写 的 css 代码 --> 
<l== Lt al> 
<script src="js/respond.min.js"></script> 
<script src="js/html5shiv.js"></script> 
<![endif]--> 
</head> 
<body> 
<!-- 此 处 可 编写 网 页 内 容 --> 
<script src="js/jquery.min.js"></script> <!-- 引 入 jQuery 环境 --> 
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<script src="js/bootstrap.min.js"></script> <!-- 引 入 Bootstrap js 代码 --> 
</body> 
</html> 


提示 : 

(1) 可 见 , 如 果 想 在 网 页 中 使 用 Bootstrap, 必须 引入 bootstrap. min. css、jquery. 
min. js 和 bootstrap. min. js, 为 了 使 网 页 内 容 能 够 尽早 加 载 ,一 般 将 两 个 js 文件 放 在 
body 的 最 下 面 引入 。 尤 其 要 注意 的 是 ,因为 Bootstrap 是 基于 jQuery 的 ,所 以 引入 
jQuery 的 语句 必须 放 在 引入 Bootstrap 语句 的 前 面 ,因此 上 述 代 码 中 最 后 两 个 二 script 放 
元 素 顺序 不 能 颠倒 。 

(2) 为 了 使 Bootstrap 能 够 兼容 IE8 浏览 器 ,必须 采用 条 件 注释 [if lt IE 9] 的 方式 引 
入 两 个 js 文件 ,其 中 respond. min.js 文件 的 作用 是 使 IE8 支持 媒体 查询 ,html5shiv.js 是 
使 IE8 能 够 支持 HTML5 新 增 的 标记 。 

(3) 上 述 HTML 代码 中 的 3 个 meta 标记 必须 放 在 head 元 素 的 最 前 面 。 

(4) 上 述 代 码 中 第 四 个 meta 标记 用 来 声明 页 面 的 编码 ,utf-8 或 gb2312 都 可 以 。 

第 四 个 meta 标记 表示 在 IE 中 运行 最 新 的 泻 染 模式 ,这 是 为 了 防止 IE 在 兼容 模式 
(模拟 老 版 本 模式 ) 下 运行 。 

第 @ 个 meta 标记 是 移动 端 网 页 必 备 的 一 行 代码 , 它 的 意思 是 让 视 口 的 宽度 等 于 设备 
的 宽度 ,初始 缩放 比例 为 1。 这 样 无 论 手机 的 分 辨 率 是 多 少 ,都 有 相同 的 显示 效果 ,并 能 
满 屏 显 示 。 


9.1.2 Bootstrap 栅 格 系统 


为 了 方便 网 页 布局 ,Bootstrap 提供 了 一 套 响 应 式 ,移动 设备 优先 的 流 式 栅 格 系统 , 栅 
格 系统 通过 一 系列 的 行 (row) 与 列 (col) 的 组 合 来 创建 页 面 布局 ,开发 者 只 要 将 网 页 模块 
放 入 这 些 创 建 好 的 栅 格 ( 格 子 ) 中 就 可 以 了 。 


1. 栅 格 系统 工作 原理 


Bootstrap 栅 格 系统 的 工作 原理 如 下 : 

。“ 行 ”必须 包含 在 布局 容器 . container 类 或 container-fluid 类 中 ,以 便 为 其 赋予 合 
适 的 对 齐 方式 (alignment) 和 内 边 距 (padding) 。 

。 每 一 行 (row) 在 水 平方 向 包含 若干 列 (col) ,并 且 只 有 “”* 列 ?可 以 作为 “ 行 ” 的 直接 子 
元 素 。 

。 行使 用 类 名 row 来 定义 , 列 使 用 类 名 “col- *-* "来 定义 ,网 页 的 内 容 应 放 在 “ 列 ” 
中 。 在 Bootstrap 中 ,每 一 行 最 多 可 等 分 为 12 列 , 列 数 大 于 12 时 ,将 另 起 一 行 
排列 。 

。 每 列 (col) 有 15px 的 左右 padding, 从 而 使 每 列 的 内 容 之 间 有 30px 的 间隔 ,为 了 
使 第 1 列 左边 和 最 后 一 列 右边 没有 15px 的 间隙 ,设置 行 (row) 的 左右 有 一 15px 
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的 margin。 又 为 了 使 行 的 左右 不 超出 容器 container 的 范围 ,设置 container 有 
15px 的 左右 padding 。 
为 了 使 读者 对 栅 格 系统 的 细节 有 更 直观 的 理解 ,下 面 制作 了 一 个 Bootstrap 栅 格 系 
统 的 原型 网 页 (9-2. html) ,为 了 简便 ,每 一 行 仅 包 含 3 列 。 图 9-2 是 其 效果 图 ,代码 如 下 : 


* {box- sizing: border- box;} 
.Container{width: 970px; margin:10px auto padding:0 15px; 
height:300px;border:1px dashed black; } 
-row{margin- left: -15px; margin- right: -15px; height:100%;border:1px solid red;} 
.col-md- 4{float:left; position:relative; padding:0 15px; width:33.33333333%; 
background:#fcc; height:100%; } 
<div class="container"> 
<div class="row"> 
<div class="col-md- 4"> 第 一 列 内 容 < /div> 
<div class="col-md- 4" style="background:#fff;"> 第 二 列 内 容 < /div> 
<div class="col-md- 4"> 第 三 列 内 容 < /div> 





</div> 
</div> 
第 二 列 内 容 
col-md-4 col-md-4 col-md-4 
图 9-2 栅 格 系统 的 原型 网 页 (9-2. html) 效 果 图 
说 明 ， 


(1) 以 上 代码 中 ,除了 height、border、background 属性 是 为 了 方便 演示 添加 的 外 ,其 
他 CSS 代码 完全 是 Bootstrap CSS 文件 中 这 几 个 类 的 真实 代码 ,并 且 没 有 删 减 。 

(2) Bootstrap 中 的 所 有 列 是 通过 浮动 (float) 实 现 水 平 排列 的 。 

(3) col-md-4 中 的 *4” 表 示 占 12 列 中 的 4 列 ,因此 宽度 是 约 33%。 可 见 , 该 数字 越 
大 ,每 列 的 宽度 就 越 大 ,一 “ 行 " 中 包含 的 “ 列 " 就 越 少 。 

(4) 每 列 都 设置 了 相对 定位 属性 ,是 为 了 配合 偏 移 属性 实现 列 偏 移 的 功能 (详细 实现 
参见 9. 1. 3 节 的 “ 列 偏 移 ” 部 分 ), 另 外 ,如 果 用 户 要 在 列 中 插入 绝对 定位 元 素 , 也 可 以 将 
“ 列 ” 作 为 这 些 元 素 的 定位 基准 (当然 大 多 数 情况 下 不 必 插 入 绝对 定位 元 素 ) 。 

(5) Bootstrap 所 有 元 素 都 设置 了 box-sizing:border-box 属性 ,这 是 为 了 方便 响应 式 
布局 的 ,这 样 一 来 ,即使 对 元 素 设 置 了 border 或 padding 值 ,都 不 会 影响 元 素 最 终 占据 的 
宽度 和 高 度 。 例 如 ,对 col-md-4 设置 了 左右 填充 ,但 col-md-4 的 最 终 宽度 仍然 是 33%。 
这 样 ,即使 屏幕 宽度 发 生变 化 ,定义 为 百分比 宽 的 列 只 会 变 窗 , 却 不 会 换行 。 另 外 , 列 与 列 
之 间 的 间隔 之 所 以 用 padding 设置 ,而 不 用 margin ,也 是 为 了 不 增加 列 的 宽度 。 

(6) container 元 素 的 宽度 在 几 个 媒体 查询 中 都 有 定义 ,在 中 型 屏幕 (992 一 1200px) 
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上 ,其 宽度 是 970px, 在 大 型 屏幕 上 ( 宇 1200px) ,其 宽度 是 1170px, 也 就 是 说 ,将 网 页 放 在 
container 元 素 中 ,网 页 的 宽度 最 大 不 会 超过 1170px。 如 果 要 制作 通栏 效果 (如 导航 条 , 通 
栏 图 片 ), 即 占 满 浏览 器 的 整个 宽度 ,可 将 网 页 元 素 放 在 container-fluid 元 素 中 ,该 元 素 的 
宽度 是 100%。 当 然 , 也 可 以 在 用 户 CSS 代码 中 重新 定义 container 元 素 的 宽度 。 


2. 栅 格 参数 


Bootstrap 区 分 了 4 种 类 型 的 浏览 器 尺寸 ( 超 小 屏 、 小 屏 、 中 屏 和 大 屏 ) ,其 像素 的 分 界 
点 分 别 是 768px、992px 和 1200px。 栅 格 系统 为 不 同 屏 幕 的 宽度 定义 了 不 同 的 媒体 查询 ， 
媒体 查询 的 相关 代码 如 下 : 


@media (min-width:768px) {.container {width:750px}} /* 小 型 屏幕 * / 
@media (min-width:992px) {.container {width:970px}} /* 中 型 屏幕 * / 
@media (min-width:1200px) {.container{width:1170px}} /* 大 型 屏幕 * / 


注意 : 超 小 型 屏幕 的 样式 CSS 默认 就 是 实现 的 ,无 须 定义 。 另 外 ,上 述 3 条 媒体 查询 
语句 顺序 不 能 颠倒 。 
Bootstrap3 栅 格 系统 的 具体 参数 如 表 9-1 所 示 。 


表 9-1 栅 格 系统 的 具体 参数 



































屏幕 尺寸 超 小 屏幕 (手机 ) 小 屏幕 (平板 ) 中 等 屏幕 (桌面 ) | 大 屏幕 (大 桌面 ) 

一 768px >768px >992px >1200px 

栅 格 系统 行为 总 是 水 平 排列 开始 是 堆 释 在 一 起 的 , 当 大 于 这 些 阔 值 将 变 为 水 平 排列 

汪汪 证 元 杂 最 | 。 None( 自 动 ) 750px 970px 1170px 

类 名 前 组 .coLxs- .coLsm- .coLmd- .coLlg- 

基础 列 数 12 

最 大 列 宽 自动 约 62px 约 81px 约 97px 

列 中 内 容 间隔 30px( 每 列 左右 均 有 15px 填充 ) 

可 媒 套 、 可 排序 是 

可 偏 移 (offsets) 是 








在 表 9-1 中 ,类 名 前 级 的 取 值 分 别 是 col-xs、col-sm、col-md、col-lg, 其 中 , xs 是 
extrasmall( 超 小 ) 的 缩写 ,sm 是 small( 小 ) 的 缩写 ,md 是 middle( 中 等 ) 的 缩写 ,lg 是 large 
(大 ) 的 缩写 。 可 见 类 名 体现 了 该 类 适 配 的 屏幕 宽度 。 


9.1.3 使 用 栅 格 系统 进行 响应 式 布 局 


因为 形 如 col-md-3 的 类 名 表示 把 3 个 基础 列 合 并 成 一 列 。 因 此 列 的 类 名 “col- *-*” 
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又 称 为 列 合并 属性 。 

栅 格 系统 可 以 让 用 户 在 不 同 尺寸 的 设备 上 看 到 不 同 的 页 面 布局 效果 ,下 面 是 一 个 示 
例 网 页 (9-3. html) ,其 在 不 同 屏幕 上 的 显示 效果 如 图 9-3 一 图 9-5 所 示 ( 说 明 : 本 章 接 下 来 
的 代码 都 只 给 出 了 body 元 素 中 的 html 代码 和 style 元 素 中 的 CSS 代码 ,请 将 这 些 代码 
嵌入 到 9-1. html 中 ) 。 

















[class^ 二 col-]{border: lpx solid #000000; height:50px; } 
[class^= col -]::after { position: absolute; left: 5px; right: 5px; content:""; 
‘opacity:0.5; 
top:5px ; bottom: 5px; background:#9cc; } /* 为 演示 给 每 个 col 加 背景 * / 
<div class="container"> 
<div class="row"> 
<div class="col-md-3 col- sm- 6">1</div><div class="col-md-3 col- sm- 6" 
>2</div> 
<div class="col-md-3 col- sm- 6">3</div><div class="col-md- 3 col- sm- 6" 
>4</div> 
</div> 
<div class="row"> 
<div class="col-md-3 col-xs- 6">5</div><div class="col-md- 3 col-xs- 6" 

















>6</div> 

<div class="col-md-3 col-xs- 6">7</div><div class="col-md- 3 col-xs- 6" 

>8</div> 

</div> 
</div> 
E | E | 
5 6 3 
图 9-3 中 型 以 上 屏幕 的 显示 效果 

| 一 和 I 
| 3 4 
| 5 6 
| 7 8 











图 9-4 小 型 屏幕 的 显示 效果 





由 图 9-3 一 图 9-5 可 见 , 列 的 col- 类 名 是 向 大 兼容 的 ,例如 col-md-3 就 暗含 了 col-lg- 
3,col-xs-6 也 暗含 了 col-sm-6 ,如 果 没 有 定义 更 小 屏幕 的 col- 类 名 ,例如 ,没有 定义 col-xs- 
类 名 , 则 默认 就 是 col-xs-12。 此 时 每 列 总 是 占 满 一 行 ,上 下 排列 。 

此 ,虽然 栅 格 系统 支持 4 种 屏幕 大 小 ,但 我 们 完全 没 必要 在 一 个 列 中 把 列 的 4 个 类 
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名 全 部 写 出 来 ,比如 希望 在 中 等 以 上 屏幕 时 网 页 分 为 3 列 ,在 中 等 以 下 屏幕 时 网 页 只 有 1 
列 , 则 只 要 添加 一 个 类 名 col-md-3 就 可 以 了 。 
2. 清除 浮动 问题 


图 9-4 是 当 每 列 高 度 相同 时 的 布局 效果 ,但 在 实际 的 网 页 中 ,每 列 的 高 度 通 常 是 不 相 
等 的 。 例 如 ,假设 第 5 列 的 高 度 比较 高 , 则 在 小 型 屏幕 上 显示 的 效果 就 如 图 9-6 所 示 。 















































1 
2 
3 

一 5 coHmd-3 coHXs-6 6 
4 添加 些 内 容 

1 
5 6 
7 8 8 
9-5 超 小 型 屏幕 的 显示 效果 图 9-6 ”两 列 不 等 高 时 


这 是 因为 每 个 列 都 具有 浮动 属性 ,由 于 浮动 的 影响 ,第 7 列 被 第 5 列 卡 住 了 ,所 以 只 
能 排 在 右边 。 因 此 ,如 果 一 行 中 的 若干 列 在 某 种 屏幕 下 会 发 生 换 行 ,并 且 换 行 后 每 行 的 元 
素 有 两 个 以 上 。 则 一 定 要 添加 清除 浮动 的 元 素 消除 这 种 浮动 的 影响 。 示 例 代 码 (9-4 
.html) 如 下 ,显示 效果 如 图 9-7 所 示 。 


<div class="row"> 


<div class="col-md-3 col-xs-6">5</div><div class="col-md-3 col-xs-6">6</ 


div> 

<div class="clearfix"></div> <!-- 添 加 的 清除 浮动 的 元 素 --> 

<div class="col-md-3 col-xs-6">7</div><div class="col-md-3 col-xs-6">8</ 
div> 
</div> 





5 coHmd-3 col-xs-6 6 
添加 些 内 容 








图 9-7 清除 浮动 之 后 


提示 : clearfix 是 Bootstrap 中 已 经 定义 好 的 清除 浮动 的 类 名 ,元 素 直接 应 用 clearfix 
类 就 能 清除 浮动 了 ,不 需要 自己 再 编写 清除 浮动 的 CSS 代码 。 


3. 列 偏 移 
有 时 为 了 布局 的 需要 ,可 能 不 希望 让 两 个 相 邻 的 列 挨 在 一 起 ,这 时 候 最 简单 的 办 法 就 
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是 为 列 元 素 添加 列 偏 移 类 名 (当然 也 可 以 在 两 个 列 之 间 插 入 一 个 空 列 用 于 占 位 ,但 是 绝对 
不 能 对 需要 偏 移 的 列 设置 margin 属性 ,那样 会 打 乱 整个 栅 格 系统 ) 。 

使 用 类 似 col-md-offset- * 形式 的 类 名 就 可 以 将 列 向 右 偏 移 n 列 ,下 面 是 一 个 示例 代 
码 (9-5. html) ,其 显示 效果 如 图 9-8 所 示 。 





<div class="container"> 
<div class="row"> 
<div class="col-md- 4"> .col-md- 4< /div> 
<div class="col-md- 4 col-md-offset- 4"> .col-md-4 .col-md- offset- 4</div> 
</div> 
<div class="row"> 
<div class="col-md- 3 col-md- offset- 3"> .col-md-3 .col-md- offset- 3</div> 
<div class="col-md- 3 col-md- offset- 3"> .col-md-3 .col-md- offset- 3</div> 
</div> 
<div class="row"> 
<div class="col-md- 6 col-md- offset- 3"> .col-md-6 .col-md- offset- 3</div> 
</div></div> 


:comd-4 | Col-md-4 .col-md-offset-4 
| -comd-3 .cotmd-offset-3 ‘Col-md-3 .cotmd-offset-3 


一 
| :cotmd-6 .cotmd-offset-3 














图 9-8 列 偏 移 (9-5. html) 的 效果 图 
在 Bootstrap 源码 中 , 列 偏 移 是 通过 margin-left 属性 实现 的 ,具体 代码 举例 如 下 : 


.Col-md-offset-6 { margin- left: 50%;} 


4. 列 隐藏 


有 时 可 能 希望 在 较 小 屏幕 时 把 网 页 中 某 些 次 要 部 分 隐藏 起 来 。 比 如 在 中 型 屏幕 时 ， 
网 页 头 部 的 左 侧 是 logo 和 网 站 标题 , 右 侧 是 装饰 性 的 图 片 。 而 在 小 型 屏幕 时 ,网 页 的 头 
部 就 只 保留 logo 和 网 站 标题 ,而 不 显示 右 侧 的 内 容 。 

这 时 可 以 在 需要 隐藏 的 列 上 添加 列 隐藏 类 名 , 列 隐藏 的 类 名 绝对 不 要 想当然 地 写成 
col-* -0, 这 样 是 不 起 作用 的 ,因为 列 合并 类 名 的 数字 只 能 是 1 一 12。 

列 隐 藏 的 类 名 有 两 种 : 以 hidden- 开 头 的 表示 在 当前 屏幕 上 隐藏 ,在 其 他 屏幕 上 可 
见 ;以 visible 开头 的 表示 在 当前 屏幕 上 显示 ,在 其 他 屏幕 上 都 隐藏 。 

例如 ,hidden-xs 表示 仅 在 超 小 型 屏幕 上 隐藏 ,其 他 屏幕 都 显示 。visible-sm 表示 仅 在 
小 型 屏幕 上 显示 ,其 他 屏幕 上 都 隐藏 。 

下 面 是 一 个 示例 代码 (9-6. html) ,其 显示 效果 如 图 9-9 所 示 。 
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#topbg { background: url (images/top bg.jpg)no- repeat center center; 
height: 166px; width: 100%; » 
#1logo{f margin-top:45px; } 
<div class="container"> 
<div class="row"> 
<div class="col-md-4 col— sm- 6"> <!-- 放 置 logo 元 素 --> 
<div id="logo"><img src="images/cslogo3.png" /></div> 
</div> 
<div class="col-md- 4 col-md-offset-4 col- sm- 6 hidden- xs"><!-- 放 置 右边 图 片 
--> 
<div id="xxct"><img src="images/xxct.jpg" /></div> 
</div> 
</div></div></div> 


四 卫 山 研 宛 -出 南 省 站 山 学 太 x 


© Dfile:///:/chuanshan/headdemo. html 
vr TE 


寺 船 灿 研究 3Y 
1 BVA se 湖南 省 般 山 学 社 | | mle 


区 出 E_ 湖 测 省 部 山 外 时 x 
© {BFiles//E:/ehuanehan/headdeno. ntal 
7 


十 TE : (oR ‘ 
A 船山 研究 本 船山 研究 
i 蔡 研 究 基地 "湖南 省 角 山 学 社 : 上 / “证 关 下 PP 


图 9-9 9-6. html 的 显示 效果 (上 : 中 大 型 屏幕 , 左 : 小 型 屏幕 , 右 : 超 小 型 屏幕 ? 


3 © Dfile:///t:/chumshan/henddry 三 





可 见 ,在 中 大 型 屏幕 中 , 左 侧 列 和 右 侧 列 都 将 应 用 col-md-4 类 ,分 别 占 4 个 基础 列 
宽 , 并 且 右 侧 列 还 会 向 右 偏 移 4 个 基础 列 (col-md-offset-4) ,因此 左 侧 列 和 右 侧 列 之 间 会 
有 4 个 列 的 间隔 。 在 小 型 屏幕 中 , 左 侧 列 和 右 侧 列 都 将 应 用 col-sm-6 类 ,分 别 占 6 个 基础 
列 宽 , 右 侧 列 不 会 偏 移 ,因此 左 侧 列 和 右 侧 列 紧 挨 在 一 起 。 在 超 小 型 屏幕 中 , 左 侧 列 由 于 
没有 定义 相应 类 名 ,将 占据 整 行 的 宽度 ,而 右 侧 列 定义 了 hidden-xs 类 名 ,因此 不 显示 。 


5. 列 排序 


列 排序 实际 上 就 是 使 用 定位 和 偏 移 属 性 对 列 进 行 重新 定位 ,使 列 的 位 置 改变 ,甚至 可 
以 把 两 列 的 位 置 交换 。 在 栅 格 系统 中 , 列 排序 是 通过 col-md-push- * 和 col-md-pull-* 来 
实现 的 。 其 中 ,push 表示 把 列 向 右 推 ,pull 表示 把 列 向 左 拉 。 示 例 代 码 (9-7. html) 如下， 
效果 如 图 9-10 所 示 。 
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<div class="row"> 
<div class="col-md- 4 col- sm- 6 col- sm-push-6 ">…</div> 
<div class="col-md- 4 col-md-offset- 4 col- sm- 6 col- sm-pull-6 hidden- xs"> 
</div></div> 


襄 船山 研究 _ 湖 南 省 船山 学 矿 x 和 
© BD file:///E:/chuanshan/headdemo. html 


船山 研究 


上 “元 "湖南 省 船山 学 社 


图 9-10 列 排序 (9-7. html) 示 意图 





上 述 代码 中 ,把 左边 的 列 元 素 向 右 推 了 6 个 基础 列 , 使 它 移动 到 了 右边 列 元 素 的 位 置 
上 ,而 把 右边 的 列 元 素 向 左 拉 了 6 个 基础 列 , 使 它 移动 到 左边 列 元 素 的 位 置 上 。 
在 Bootstrap 源码 中 , 列 排 序 是 通过 偏 移 属性 实现 的 ,例如 : 


.col-md-pull-6{ right: 50%;} col-md-push-6{ left: 50%;} 


当然 ,我 们 知道 ,只 有 设置 了 定位 属性 的 元 素 才能 使 用 偏 移 属性 ,而 列 合 并 类 名 都 定 
义 了 相对 定位 属性 (如 . col-sm-6{ position: relative;)), 因 此 列 排序 才能 使 用 偏 移 属性 ， 
表示 在 原来 位 置 基础 上 偏 移 多 少 百分比 。 


6. 列 嵌 套 


栅 格 系统 还 支持 列 的 租 套 , 即 在 一 个 列 元 素 中 再 插入 一 个 或 者 多 个 行 (row)。 此 时 ， 
内 部 嵌 套 行 (row) 的 宽度 就 是 当前 外 部 列 的 宽度 。 

列 嵌 套 在 网 页 布局 中 经 常 使 用 ,图 9-11 是 一 个 网 页 局 部 版 面 ,该 版 面 首先 按 7 :5 的 
比例 划分 成 左右 两 列 : 左 列 放置 轮 播 图 , 右 列 放置 “研究 动态 ”栏目 。 在 该 栏目 中 ,头条 新 
闻 又 被 划分 为 左右 两 列 : 左 列 放置 图 片 , 右 列 放置 标题 和 内 容 。 下 面 是 该 版 面 的 布局 代 
码 (9-8. html) ,其 显示 效果 如 图 9-12 所 示 。 


<div class="container"> 


<div class="row"> 


<div class="col- sm- 7"> <!-- 第 一 层 左 列 --> 
<div class="lunbo"> 轮 播 图 < /div> 

</div> 

<div class="col- sm- 5"> <!-- 第 一 层 右 列 --> 

<div class="row"> <!-- 艇 套 层 row --> 


<h2 class= "ltitle"> 研 究 动态 < /h2> 
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<div class= "col- sm- 4" style="padding:0;"> <!-- 重 置 该 列 的 填充 为 0 --> 
<img src="images/55.jpg" /></div> 
<div class="col_ sm_ 8"><p style=" margin:0 -15px;"> 
<!-- 抵 消 所 在 列 的 填充 --> 
王 船山 对 程 朱 忠 想 论 的 反思 与 发 展 …< /p>< /div> 
</div><!-- 内 层 row 结 束 --></div></div></div> 












可 究 动态 ”col-md-5 可 


| 王 船山 对 程 朱 忠 起 论 的 反思 与 发 展 -| 
竹山 山 对 程 朱 中 癌 沦 的 友 妓 与 发 展 于 船山 对 程 
md-qi|4#z col-md-8c-oo 
+ 论 王 略 山 “神道 设 教 ” 供 生 源 礼 实 下 的 在 党。 [11-09] 
* 王夫之 之 礼 与 政治 和 合 相 至 何 可 能 一 Ga-o6] 
+ 王夫之 的 家 尾 伦 理 观 及 号 当代 价值 … [10-23] 
+ 王夫之 的 友情 观 及 其 当代 价 信 Co-a 
+ 如 山寺 二 与 社会 王 义 配 必 价 信 疯 … (10-2] 


























图 9-12 ”9-8. html 的 运行 效果 


说 明 : 

(1) 通过 列 嵌 套 ,就 能 够 得 到 任意 宽度 的 列 。 例 如 ,该 列 中 嵌 套 层 中 的 左 列 元 素 宽 度 
为 : 5/12X4/12 一 13.89%% 。 

(2) 关于 列 间隔 的 调整 , 当 对 页 面 进行 列 的 多 层 赃 套 后 ,最 内 层 的 列 可 能 会 很 窗 , 而 
列 与 列 之 间 的 间隔 仍然 是 30px, 显 得 太 宽 不 协调 。 要 减少 或 清除 列 间 隔 有 两 种 方法 : 

中 当 该 列 内 没有 row 元 素 ( 没 有 再 柑 套 列 ) 时 ,可 安全 地 将 该 列 的 padding 重 设 为 0; 

@ 设置 该 列 中 直接 子 元 素 的 左右 margin 为 一 15px, 从 而 抵消 该 列 padding 的 影响 。 


9.2 Bootstrap 中 的 网 页 组 件 


Bootstrap 组 件 能 帮助 开发 者 快速 构建 出 绚丽 的 页 面 。 其 中 最 常用 的 组 件 有 导航 条 
(navbar) 、 轮 播 图 (Carousel) .Tab 面板 (Tab)、 媒 体 对 象 (Media Object) 等 。 


9.2.1 基于 组 件 的 网 页 制作 方法 
所 谓 基于 组 件 的 网 页 制作 技术 ,是 指 将 网 页 中 可 能 需要 的 各 个 组 件 (如 导航 条 、 栏 目 


框 ) 先 制作 出 来 ,然后 将 这 些 组 件 装配 进 网 页 的 布局 框架 中 形成 网 页 。 就 好 比 生产 汽车 ， 
先 把 汽车 的 发 动机 、 变 速 箱 等 零件 生产 出 来 ,再 将 这 些 零件 整 装 成 汽车 。 
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传统 的 网 页 制作 方法 ,是 自 顶 向 下 的 , 它 是 先 将 网 页 的 总 体 布 局 代码 设计 出 来 ,然后 
设计 各 个 栏目 (区 域 ) 的 布局 代码 ,再 实现 每 个 栏目 (区 域 ) 中 各 个 网 页 元 素 的 显示 效果 。 
可 见 传统 的 网 页 制作 是 一 个 自 顶 向 下 .逐步 细 化 的 过 程 。 

基于 组 件 的 网 页 制作 方法 ,是 一 种 自 底 向 上 的 设计 方法 ,与 传统 的 网 页 制作 方法 相 
比 ,虽然 在 制作 单个 网 站 时 ,其 花费 的 时 间 可 能 并 不 比 传统 网 页 制作 方法 少 ,但 是 如 果 经 
常 需要 制作 网 站 ,这 种 方法 就 能 够 快速 地 重用 已 经 做 好 的 各 种 组 件 , 使 得 开发 效率 大 大 提 
高 。 而 传统 的 网 页 制作 方法 ,如 果 要 重用 以 前 的 网 页 ,只 能 在 原 有 的 网 页 基础 上 改 , 随 着 
网 页 越 来 越 复 杂 , 原 有 的 网 页 在 设计 时 又 没有 遵循 任何 标准 ,使 得 这 种 修改 会 变 得 越 来 

基于 组 件 的 网 页 制作 方法 可 分 为 以 下 几 个 步骤 : 

(1) 建立 标准 组 件 库 。 对 于 任何 网 页 来 说 ,常见 的 网 页 元 素 大 致 有 导航 条 、 栏 目 框 、 
搜索 框 ` 图 片 轮 显 框 `Tab 面板 ,图片 滚 动 栏 以 及 页 头 和 页 尾 等 。 开 发 者 可 以 将 各 种 样式 
的 组 件 分 门 别 类 地 保存 到 标准 组 件 库 中 ,以 后 还 可 以 对 组 件 库 中 的 组 件 进行 扩展 。 

以 导航 条 为 例 , 各 种 网 站 上 的 导航 条 ,无 非 可 以 分 为 以 下 几 种 : 导航 条 背景 是 单 色 
的 ,导航 条 背景 是 图 片 平 铺 的 ,导航 项 背景 是 单 色 的 ,导航 项 背景 是 图 片 的 ,导航 项 背景 是 
图 片 结合 滑动 门 技 术 的 。 导 航 项 背景 是 图 片 翻转 技术 的 。 

以 栏目 框 为 例 ,典型 的 栏目 框 有 以 下 几 种 : 

@ 栏目 新 闻 不 带 日 期 

@ 栏目 新 闻 带 日 期 ; 

@ 带头 条 新 闻 的 栏目 框 ; 

@ 带 图 片 和 头条 新 闻 的 栏目 框 。 

从 栏目 框 的 样式 来 看 ,又 可 分 为 : 

@ 带 边框 的 栏目 框 ; 

@ 不 带 边框 的 栏目 框 ; 

@ 栏目 框 头 部 是 图 片 的 ， 

@ 栏目 框 头 部 是 单 色 背 景 的 。 

将 以 上 每 种 导航 条 和 栏目 框 都 分 别 制作 一 个 原型 (注意 类 名 和 id 名 不 要 重复 ), 写 上 
注释 ,保存 在 组 件 库 中 。 

(2) 建立 网 页 布局 代码 库 。 常 用 的 网 页 布局 版 式 也 只 有 几 种 ,如 1-2-1 式 、1-3-1 式 ， 
可 变 宽 度 的 、 固 定 宽度 的 等 ,将 每 种 网 页 布局 的 代码 分 别 保存 成 一 个 网 页 文件 , 写 上 注释 ， 
保存 在 网 页 布局 代码 库 中 。 

(3) 组 装 网 页 。 根 据 网 页 效果 图 选择 适合 的 网 页 布局 代码 ,再 从 标准 组 件 库 中 选择 
适合 的 组 件 ,将 它们 的 HTML 代码 和 CSS 代码 插入 到 网 页 布局 代码 中 ,这 样 就 完成 了 一 
个 基本 的 网 页 ,再 根据 网 页 效果 图 ,对 网 页 元 素 的 细节 进行 美化 或 修改 。 如 果 发 现 新 做 的 
网 页 中 有 好 的 比较 典型 的 网 页 组 件 , 可 以 把 这 些 组 件 添加 到 组 件 库 中 去 。 

对 于 一 般 开 发 者 而 言 ,制作 网 页 组 件 库 是 一 项 复杂 而 庞大 的 工作 ,为 此 ,Bootstrap 为 
开发 者 提供 了 一 套 组 件 库 ,开发 者 可 以 直接 使 用 这 些 组 件 。 
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9.2.2 导航 条 


导航 条 是 网 页 中 不 可 或 缺 的 元 素 ,Bootstrap 导航 条 组 件 能 帮助 开发 者 快速 地 实现 导 
航 条 ,并 且 这 种 导航 条 是 响应 式 的 , 它 在 移动 设备 上 会 自动 折 又 。 本 节 主 要 介绍 如 何 使 用 
Bootstrap 制作 一 个 基础 导航 条 ,以 及 如 何 修改 默认 导航 条 的 样式 。 


1. 基础 导航 条 


使 用 Bootstrap 制作 基础 导航 条 的 步骤 如 下 : 

(1) 插入 一 个 容器 二 nav 二 或 二 div 二 标记 ,为 其 添加 navbar 类 名 和 navbar-default 类 
名 ,并 且 添 加 属性 role 二 "navigation" ,用 来 增加 可 访问 性 。 

(2) 在 第 (1) 步 的 容器 标记 中 再 插入 一 个 二 div 二 标记 ,为 该 标记 添加 navbar-header 
类 名 ,这 样 就 将 该 元 素 定 义 为 了 导航 条 的 头 部 , 头 部 包含 带 有 nav-brand 类 名 的 二 a 二 标 
记 , 用 于 定义 品牌 图 标 ,也 可 以 是 文字 ,如 果 是 文字 , 则 文字 的 字体 会 增 大 一 号 。 

(3) 向 导航 条 中 添加 导航 项 ,方法 是 插入 一 个 二 ul 二 标记 ,再 设置 该 标记 的 类 名 为 
nav 类 和 navbar-nav 类 。 接 着 再 往 该 二 ul 二 标记 中 插入 含有 超 链接 的 二 li 二 标记 作为 导 
航 项 就 可 以 了 。 如 果 要 将 某 个 导航 项 设置 为 当前 导航 项 ,可 对 该 二 li 二 标记 添加 active 
类 名 。 

提示 : 一 般 的 导航 条 中 可 能 只 需要 导航 项 就 可 以 了 。 但 Bootstrap 导航 条 为 了 支持 
响应 式 , 需 要 能 在 移动 设备 中 显示 折 登 起 来 的 导航 条 ,就 需要 一 个 导航 条 头 部 标识 导航 条 
了 ,因为 所 有 的 导航 项 此 时 都 被 折 登 而 不 可 见 。 

基础 导航 条 的 具体 实现 代码 (9-9. html) 如 下 ,显示 效果 如 图 9-13 所 示 。 


<nav class="navbar navbar-default" role="navigation"> 


<!-- 导 航 条 的 容器 --> 


<div class="navbar-header"> <!-- 导 航 条 头 部 --> 
<a class="navbar-brand " id= "nav-brand- itheima" href="#" > 网 站 首页 < /a> 
</div> 


<ul class="nav navbar-nav"> 
<1i class="active"><a href="#"> 研 究 机 构 </a></1i> 
<1li><a href="#"> 船 山 学 人 </a></1i><1i><a href="#"> 船 山 科 普 </a></1i> 
<1i><a href="#"> 船 山 著作 < /a>< /1i><1i><a href="#"> 船 山 讲 坛 </a></1i> 
</ul> 
</nav> 





© 3 CC Bfile:///M:/code/09/9-9. html 


网 站 首页 “研究 机 梅 。 角 山 学 人 币 山 刊 车。 船山 著作 。 船山 讨 坛 





图 9-13 ”基础 导航 条 (9-9. html) 的 显示 效果 
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该 基础 导航 条 在 小 型 以 上 屏幕 中 是 水 平 导航 项 显示 ,而 在 超 小 型 屏幕 中 会 自动 变 为 
纵向 显示 的 竖 直 导航 条 。 


2. 响应 式 导 航 条 


虽然 基础 导航 条 在 超 小 型 屏幕 中 也 会 纵向 显示 导航 项 ,但 是 导航 项 不 能 折 释 ,默认 就 
显示 全 部 导航 项 ,而 响应 式 导 航 条 能 实现 在 超 小 型 屏幕 中 导航 项 自动 折 释 (隐藏 ) ,并 且 右 
边 出 现 一 个 汉堡 按钮 , 单 击 该 按钮 能 使 导航 项 在 展开 和 折 释 两 种 状态 下 切换 。 

实现 响应 式 导航 条 有 以 下 两 个 步骤 。 

(1) 导航 项 折 芭 (隐藏 ) 的 实现 。 由 于 所 有 导航 项 都 在 二 ul 二 标记 中 ,所 以 在 基础 导 
航 条 的 二 ul 二 标记 外 包 庄 一 个 二 div 二 标记 ,并 且 为 该 一 div 之 添加 collapse 和 navbar- 
collapse 两 个 类 名 ,以 及 一 个 navbar-collapse 的 id 属性 值 。 

(2) 添加 右 侧 的 汉堡 按钮 ,在 过 nav 之 标记 中 添加 一 个 过 button 之 标记 ,并 为 该 
一 button 过 标记 添加 navbar-toggle 和 collapsed 两 个 类 名 ,再 添加 一 个 data-target 一 " 井 
navbar-collapse" 的 属性 ,代表 这 个 按钮 控制 的 是 id 值 为 navbar-collapse 的 容器 ;以 及 
data-toggle 二 "collapse" 的 属性 ,作用 是 实现 折 双 。 

响应 式 导航 条 的 具体 实现 代码 (9-10. html) 如 下 ,显示 效果 如 图 9-14 所 示 。 


<nav class="navbar navbar- default" role="navigation"> 
<button type= "button" class="navbar- toggle collapsed" data-toggle= 
"collapse" data- target="#navbar- collapse" aria-expanded= "false"> 
<!-- 汉 堡 按钮 --> 
<span class="sr-only"> 汉 堡 按钮 < /span> 
<span class="icon-bar"></span><span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<div class="navbar-header"> <!-- 导 航 条 头 部 --> 
<a class="navbar-brand " id= "nav-brand- itheima" href="#" > 网 站 首页 < /a> 
</div> 
<div class="collapse navbar- collapse" id="navbar- collapse"><!- -实现 折 短 - 
二 
<ul class="nav navbar- nav"> 
<1i class="active"><a href="#"> 研 究 机 构 </a></1i> 
<1i><a href="#"> 船 山 学 人 </a></1i><1i><a href="#"> 船 山 科 普 </a></1i> 
<1i><a href="#"> 船 山 著作 </a>< /1i><1i><a href= "#"> 船 山 讲坛 </a></1i> 
</ul></div> 
</nav> 


提示 : 如 果 和 希望 导航 条 头 部 仅仅 在 超 小 屏幕 中 显示 ,在 电脑 端 屏 幕 中 不 显示 ,可 以 为 
导航 条 头 部 应 用 visible-xs 类 , 即 一 div class 一 "navbarheader visible-xs" 二 。 
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3 Dfile:///M://code/09/deno: 三 
网 站 首页 


研究 机 构 


f 说 CD File:///0://code/09/deme: 王 币 L 涯 人 





网 站 首页 三 骨科 得 





山寺 作 


图 9-14 ”9-10. html 的 显示 效果 ( 左 : 默认 状态 , 右 : 单 击 按钮 后 的 展开 状态 ) 


3. 带 有 下 拉 菜 单 的 导航 条 


很 多 时 候 , 网 站 需要 二 级 导航 条 , 即 带 有 下 拉 菜 单 的 导航 条 。 在 Bootstrap 中 ,要 使 
某 个 导航 项 带 有 下 拉 菜 单 ,只 要 修改 该 导航 项 对 应 的 二 li 二 元 素 即 可 。 首 先 , 为 二 1 二 标 
记 应 用 一 个 dropdown 的 类 名 。 然 后 ,在 其 二 a 二 标记 中 添加 一 个 dropdown-toggle 的 类 
名 ,以 及 一 个 属性 data-toggle 二 "dropdown"。 最 后 ,在 二 a 标记 的 后 面 添 加 一 个 无 序列 
表 元 素 二 ul 作为 下 拉 菜 单 , 并 为 该 二 ul 二 标记 应 用 dropdown-menu 的 类 名 。 

带 有 下 拉 菜 单 的 导航 项 的 关键 代码 (9-11. html) 如 下 ,显示 效果 如 图 9-15 所 示 。 


<1i class="dropdown"> <!-- 表 示 带 有 下 拉 菜 单 --> 
<a href="#" class="dropdown- toggle" data-toggle="dropdown"> 船 山 科普 < /a> 
<ul class="dropdown- menu"> <!-- 下 拉 菜单 --> 


<1i><a href="#"> 王 船山 其 人 </a></1i> 
<1i><a href="#"> 船 山 故 居 </a></1i><1li><a href="#"> 船 山 文 化 </a></1i> 


<1i class="divider"></li> <!-- 添 加 分 隔 线 --> 
<1i><a href= "#"> 船 山 遗 迹 </a></1i><li><a href="#"> 船 山 文献 </a></1i> 
</ul></1i> 


网 站 首页 “研究 机 构 船 L 学 人 ”船山 科 秋 船 UL 著作 ”船山 讲坛 


王 船山 其 人 
船山 故居 
船 U 文 化 


船山 于 迹 
船山 文献 








图 9-15 带 有 下 拉 菜 单 的 导航 项 (9-11. html) 


在 下 拉 菜 单 中 ,插入 过 li class= "divider" 盖 一 /1i 盖 可 添加 一 条 分 隔 线 ,而 在 一 级 导航 
项 a 元素 内 的 文字 后 添加 二 b class 王 "caret" 二 一 /b> ,就 会 出 现 一 个 下 三 角 图 标 。 

但 是 ,这 个 导航 条 的 下 拉 菜 单 需 要 单 击 鼠标 才能 触发 ,这 样 设计 是 因为 Bootstrap 需 
要 适应 移动 端 设备 (在 手机 屏幕 上 只 有 点 击 事件 ,而 没有 悬 停 事 件 ) 。 而 这 对 于 电脑 端 网 
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页 来 说 不 仅 操作 不 便 , 而 且 还 把 一 级 导航 项 中 的 单 击 超 链接 事件 给 屏蔽 了 。 
下 面 的 代码 (9-12. html) 可 以 解决 下 拉 菜 单 需要 单 击 鼠 标 才能 触发 的 问题 : 


emedia (min-width:768px) { /# 该 css 代码 需 放 在 style 元 素 末尾 * / 
.nav>1i:hover .dropdown-menu { display: block; }} 
/#* 添加 hover 伪 类 * / 
<script> // 该 js 代码 需 放 在 body 元素 末尾 


$ (document) .ready (function (){ 
if($ (window) .width()>=768) 
$ (document) .off ('click.bs.dropdown.data- api'); 
// 关 闭 下 拉 莱 单 的 默认 事件 
Ds; 
</script> 


说 明 : 以 上 代码 都 是 先 判 断 浏览 器 窗口 的 尺寸 ,如 果 大 于 768px, 才 执行 js 代码 和 添 
加 CSS 样式 ,这 样 , 既 能 保证 网 页 在 电脑 端 时 , 悬 停 显 示 下 拉 菜 单 和 导航 项 链接 有 效 ,又 
能 保证 在 移动 端 ( 超 小 屏幕 ) 时 仍然 保留 单 击 显示 下 拉 菜 单 的 效果 。 


4. 修改 导航 条 的 默认 样式 


Bootstrap 为 我 们 提供 的 是 基础 的 CSS 样式 ,如 果 想 自 定义 样式 ,有 两 种 方法 : 

(1) 直接 修改 Bootstrap 的 CSS 源 代码 中 的 CSS 样式 ,这 种 方式 会 破坏 Bootstrap 样 
式 的 完整 性 ,不 建议 使 用 。 

(2) 重新 定义 Bootstrap 中 有 关 选 择 器 的 样式 ,把 这 些 重 定义 的 代码 放 在 链接 
bootstrap. min. css 的 link 语句 下 面 ,就 能 覆盖 掉 Bootstrap 原来 的 默认 样式 了 。 

例如 ,要 修改 导航 条 的 默认 背景 样式 ,可 以 通过 重新 定义 . navbar-default 选择 器 的 样 
式 来 实现 。 导 航 条 常用 样式 的 设置 代码 (9-13. html) 如 下 ,显示 效果 如 图 9-16 所 示 。 


.navbar-default { background- color: #900; } /* 导航 条 背景 色 * / 
.navbar- default .navbar-nav>1i>a { color: #f9f9f9;} 
/* 导航 条 前 景色 * / 
.navbar-nav>li>a{ padding: 10px 20px;} /* 每 个 导航 项 的 大 小 * / 
.navbar- default .navbar—- nav> 1i>a:focus, .navbar- default .navbar- nav> li>a: 
hover { 
color: #fff; background- color:#8b8;} /* 导航 项 hover 时 的 样式 * / 
.navbar{ border- radius: 0; min- height:40px; /* 导航 条 的 高 度 * / 
margin- bottom:10px;} /* 导航 条 的 下 边界 * / 
-dropdown-menu { background- color: #9c9;} /#* 下 拉 菜 单 的 背景 色 * / 
-dropdown-menu>li>a { padding: 8px 20px; color: #333;} 
/< 下 拉 菜 单项 的 大 小 * / 
.dropdown—menu>1i>a:focus, .dropdown—menu>1i>a:hover { 
color: #fff; background- color: #c33;} /< 下 拉 菜 单项 的 hover 样式 * / 
-navbar-default -navbar-brand { color: #fff;} /< 导航 条 头 部 的 样式 * / 
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船山 科普 船山 著作 





船山 故居 


人 


图 9-16 自 定义 导航 条 样式 后 的 效果 


5. 带 有 搜索 表单 的 导航 条 


有 些 导 航 条 中 带 有 搜索 表单 。 图 9-17 是 这 种 导航 条 的 效果 图 ,实现 方法 是 : 在 9- 
10. html 代码 基础 上 ,在 类 名 为 collapse 的 div 元 素 中 插入 form 元 素 (9-14. html) 。 


<div class="collapse navbar- collapse" id= "navbar- collapse"> 
<ul class="nav navbar-nav"n>…</ul> <!-- 所 有 导航 项 的 代码 --> 
<form class="navbar- form navbar- left" role="search"> 
<div class="form- group"> 
<input type="text" class="form- control" placeholder="Search"></div> 
<button type="submit" class="btn btn- default"> 提 交 < /button></form></div> 





图 9-17 带 有 搜索 表单 的 导航 条 (9-14. html) 


如 果 要 修改 文本 框 的 样式 可 重 定 义 . form-control 类 的 样式 。 修 改 button 按钮 的 样 
式 建议 添加 一 个 类 名 (如 mybtn) ,以 方便 重新 定义 btn 类 的 样式 。 


9.2.3 轮 播 插件 


Bootstrap 轮 播 插件 可 以 轻松 实现 轮 播 图 效果 ,并 且 是 响应 式 的 。 轮 播 图 由 3 个 部 分 
组 成 : 轮 播 的 图 片 . 计 数 器 和 控制 按钮 。 
下 面 是 轮 播 图 的 代码 (9-15. html) 实 现 ,其 显示 效果 如 图 9-18 所 示 。 


<div id="myCarousel" class="carousel slide" data- ride="carousel"> 
<div class="carousel- inner"> <!-- 轮 播 (Carousel) 项 目 --> 
<div class="item active"> <!-- 第 1 张 图 的 容器 --> 
<a href="#">< img src="images/1.jpg" alt=" 图 1"></a></div> 
<div class="item"> 
<a href="#"><img src="images/2.jpg" alt=" 图 2"></a></div> 
<div class="item"> 
<img src= "images/3.jpg" alt=" 图 3"></div> 
</div> 
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<ol class= "carousel- indicators"> <!-- 轮 播 (carousel) 计 数 器 --> 
<1i data-target= "#myCarousel" data- slide-to="0" class="active"></1i> 
<1i data-target= "#myCarousel" data- slide-to="1"></1i> 
<1i data- target="#myCarousel" data- slide- to="2"></1i> 
</ol> 
<!-- 轮 播 (carousel) 导 航 --> 
<a class="carousel- control left" href="#myCarousel" data- slide= "prev"> 
<span class="glyphicon glyphicon- chevron- left"></span> 
<!-- 向 左 图 标 --> 
</a> 
<a class="carousel- control right" href="#myCarousel" data- slide= "next"> 
<span class="glyphicon glyphicon- chevron- right"></span><!-- 向 右 图 标 --> 
</a> 
</div> 





图 9-18 轮 播 图 的 效果 


1. 轮 播 图 的 容器 


插入 一 个 容器 标记 (如 所 div 二 ) ,为 其 添加 carousel 类 名 和 slide 类 名 ,其 中 carousel 
类 名 使 它 成 为 一 个 轮 播 容器 ,slide 类 名 是 可 选 的 ,用 来 使 轮 播 图 轮 播 时 具有 动画 过 渡 效 
果 。 然 后 为 其 设置 一 个 id 名 ,如 myCarousel, 该 id 名 是 任意 取 的 ,但 必须 要 有 ,因为 轮 播 
容器 中 的 其 他 元 素 要 引用 。 最 后 为 该 div 设置 一 个 属性 : data-ride 王 "carousel" ,用 来 标 
记 轮 播 图 在 页 面 加 载 时 就 会 自动 播放 ,否则 轮 插图 不 会 自动 播放 。 代 码 如 下 : 


<div id="myCarousel" class="carousel slide" data- ride="carousel"> 
“</div> 


2. 轮 播 项 目 


轮 播 项 目 必须 放 在 一 个 类 名 为 carousel-inner 的 div 中 ,每 个 项 目 是 一 个 类 名 为 item 
的 div, 每 个 项 目 中 可 放 一 个 被 超 链接 包含 的 图 片 .这 样 单 击 图 片 就 会 转 到 指定 的 链接 地 
址 ;如 果 不 需 要 超 链接 ,也 可 以 直接 放 一 张 图 片 。 
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轮 播 图 中 的 图 片 默认 是 在 div. item 中 左 对 齐 的 ,如 果 希 望 图 片 居中 对 齐 , 可 添加 如 
下 CSS 代码 : 


.item img{margin:0 auto;} 


还 可 以 给 轮 播 图 中 的 图 片 添加 说 明文 字 , 方 法 是 在 . item 元 素 中 添加 类 名 为 
carousel-caption 的 div 元 素 ,示例 代码 (9-16. html) 如 下 : 


<div class="item active"> 
<a href="#"><img src="images/1.jpg" alt=" 图 1"></a> 
<div class="carousel- caption"> 


<h3> 王 船山 雕像 </h3> <p> 描述 内 容 1…< /p> 
</div></div> 


还 可 以 改变 说 明文 字 carousel-caption 元 素 的 样式 ,比如 添加 背景 色 , 示 例 代码 如 下 , 


.Carousel- caption { 
position: absolute; right: 0; bottom: 0; left: 0; padding: 10px; 
background: rgba(166, 0, 0, 0.4); 二 


3. 轮 播 计 数 器 


所 谓 轮 播 计 数 器 ,就 是 指 图 9-18 中 轮 播 容器 内 正 下 方 的 一 组 小 圆圈 , 它 的 作用 是 指 
示 当 前 出 现 的 是 第 几 张 图 片 , 单 击 小 圆圈 还 可 转 到 对 应 的 图 片 。 轮 播 计 数 器 是 用 一 个 类 
名 为 carousel-indicators 的 ol 元 素 定义 的 ,有 有 几 张 图 片 就 在 里 面 放 几 个 1 元素 。 每 个 1 
元 素 都 必须 添加 属性 : data-target 二 "# 轮 播 容器 的 id 值 " ,代码 如 下 : 


<ol class="carousel- indicators"> < !-- 轮 播 (Carousel) 计 数 器 --> 
<1i data- target="#myCarousel" data- slide-to="0" class="active"></1i> 
<1i data- target="#myCarousel" data- slide-to="1"></1i> 
<1i data- target="#myCarousel" data- slide-to="2"></1i> 

</ol> 


如 果 要 改变 轮 播 计数 器 的 位 置 .可 以 参考 如 下 CSS 代码 : 
.Carousel- indicators { 

position: absolute; top: 15px; right: 15px; z-index: 5; margin: 0; } 
4. 轮 播 导航 


轮 播 导 航 是 指 图 9-18 中 轮 播 容器 左右 两 边 的 两 个 小 箭头 。 单 击 这 两 个 箭头 可 以 向 
前 或 向 后 滚动 图 片 , 轮 播 导 航 使 用 一 个 类 名 为 carousel-control 的 二 a 二 标记 定义 , 轮 播 导 
航 中 的 图 标 一 般 用 Bootstrap 中 自 带 的 字体 图 标 制作 (也 可 以 用 自 定义 的 图 片 文件 来 
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做 ) ,代码 如 下 : 


<a class="carousel- control left" href="#myCarousel" data- slide= "prev"> 
<span class="glyphicon glyphicon- chevron- left"></span></a> 
<a class="carousel- control right" href="#myCarousel" data- slide="next"> 


<span class="glyphicon glyphicon- chevron- right"></span></a> 


5. 轮 播 图 的 选项 修改 


轮 播 图 中 的 图 片 默 认 是 5s 切换 一 次 的 ,要 改变 轮 播 图 的 切换 速度 为 1s, 只 要 对 轮 播 
图 的 容器 carousel 元 素 添 加 data-interval 二 "1000" 就 可 以 了 。 
当 鼠 标 指针 滑动 到 轮 播 图 上 时 , 轮 播 图 会 停止 播放 ,如 果 不 希 望 停止 播放 ,可 对 


carousel 元 素 添加 data-pause 一 "false" 。 


9.2.4 选项 卡 面板 


Bootstrap 选项 卡 组 件 可 以 轻松 实现 选项 卡 面 板 。 图 9-19 是 Bootstrap 选项 卡 面 板 
的 默认 效果 ,选项 卡 面板 由 两 部 分 组 成 : 上 方 是 一 组 导航 链接 按钮 ,下 方 是 一 组 内 容 面 
板 , 当 单 击 某 个 导航 链接 时 ,就 会 显示 与 其 对 应 的 内 容 面 板 , 而 其 他 内 容 面板 则 隐藏 。 

制作 选项 卡 面板 的 主要 步骤 如 下 : 

(1) 制作 选项 卡 导航 条 。 添 加 一 个 二 ul 二 标记 ,对 其 应 用 nav 和 nav-tabs 类 (或 nav- 
pills 类 ,表示 胶囊 式 , 如 图 9-20 所 示 )。 在 ul 元 素 中 添加 若干 个 二 1i 二 标记 ,对 当前 导航 
项 对 应 的 二 标记 应 用 active 类 。 再 在 每 个 li 元 素 中 添加 二 a 二 标记 作为 导航 链接 ,每 个 
去 a> 标 记 必 须 添加 属性 data-toggle 二 "tab" 和 href 二 "# 内 容 面 板 id" (或 data-target 一 
"# 内 容 面板 id")。 


船山 讲坛 船山 科普 船山 过 迹 UL 科 基 船山 遗迹 











《孝道 、 人 道 、 治 道 与 " 孝 " 的 当代 意义 》 6/15 《孝道 、 人 道 、 治 道 与 " 孝 " 的 当代 意义 》 6/15 

实地 考察 学 习 " 船 山 精 神 * 2017/4/20 实地 考察 学 习 "船山 精神 " 2017/4/20 

《船山 学 刊 》" 文 化 自信 与 弘扬 中 华 优秀 传统 文化 "2017/4/14 《船山 学 刊 》" 文 化 自信 与 弘扬 中 华 优秀 传统 文化 "| 

我 市 将 编 划 《衡阳 文化 大 典 船 山 文化 》 2017/4/8 我 市 将 编 甘 《衡阳 文化 大 典 .船山 文化 》 2017/4/8 
图 9-19 选项 卡 面板 默认 效果 图 9-20” 胶 圳 式 选项 卡 面板 


(2) 制作 内 容 面板 组 。 添 加 一 个 类 名 为 tab-content 的 二 div 之 标记 ,作为 所 有 内 容 面 
板 的 容器 。 在 该 容器 中 ,插入 若干 个 类 名 为 tab-pane 的 二 div 之 标记 ,作为 内 容 面板 ,对 每 
个 内 容 面板 设置 一 个 id( 和 导航 链接 中 指向 的 id 对 应 起 来 ) 。 对 当前 内 容 面 板 应 用 active 
类 。 如 果 希 望 内 容 面板 有 淡 入 淡出 效果 ,可 对 其 应 用 fade 类 ,当前 内 容 面板 还 要 应 用 
in 类 。 

下 面 是 选项 卡 面板 的 实现 代码 (9-17. html) ,显示 效果 如 图 9-19 所 示 。 


<ul id= "myTab" class="nav nav- tabs"> <!-- 选 项 卡 导 航 条 --> 
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<1i class="active"><a href="#cont1" data-toggle= "tab"> 船 山 讲坛 </a></1i> 
<1i><a href="#cont2" data-toggle= "tab"> 船 山 科 普 </a></1i> 
<1i><a href="#cont3" data-toggle= "tab"> 船 山 遗 迹 </a></1i> 
</ul> 
<div id="myTabCont" class="tab- content"> <!-- 选 项 卡 内 容 面 板 组 --> 
<div id- "contl" class= "tab-pane fade active in"> 
《孝道 .人 道 、 治 道 与 " 孝 " 的 当代 意义 ) ”6/15<br>…</div> 
<div id="cont2" class="tab-pane fade ">…</div> 
<div id="cont3" class="tab-pane fade">…</div> 
</div> 


1. 选项 卡 面板 的 样式 设置 


可 以 对 Bootstrap 中 选项 卡 面板 的 CSS 代码 重新 定义 ,制作 出 如 图 9-21 所 示 的 选项 
卡 面 板 , 它 的 CSS 代码 (9-18. html) 如 下 。 


.lanmu{margin:10px;} /* 选项 卡 面板 整体 的 外 边 距 * / 
.nav- tabs>1i>a {background:#ccf;color:#fff; } /* 导航 项 的 背景 色 和 前 景色 * / 
.tab- content {padding:10px;border:1px solid #ddd;border- top:none;} 

/* 添加 边框 * / 
.tab-pane{line-height:1.8em;} 
<div class="lanmu">…<!-- 省 略 的 是 选项 卡 的 代码 (9-17.html)--></div> 


船山 下 迹 


生生 不 息 华夏 礼 十 八 而 志 梦 启程 


船山 学 研究 基地 组 团 前 往 韩国 进行 学 术 交 流 
我 校 召开 2017 国 际 学 术 研 讨 会 "船山 学 研究 在 国外 "6/20 
国学 驾 香 ， 探 寻 王 船山 的 爱国 情怀 与 终身 追求 








图 9-21 选项 卡 面板 样式 重 定义 后 
可 见 , 上 述 代 码 主要 是 定义 了 选项 卡 导航 项 的 背景 颜色 ,内 容 面 板 组 的 左右 和 下 边框 


以 及 填充 ,内 容 面 板 的 行 高 等 。 为 了 让 选项 卡 作为 一 个 整体 ,在 选项 卡 代码 外 面包 里 了 一 
个 类 名 为 lanmu 的 div, 并 定义 了 它 的 外 边 距 。 





2. 将 选项 卡 变 成 滑动 式 触发 


Bootstrap 选项 卡 为 了 支持 响应 式 ,默认 是 单 击 导航 项 才 触 发 的 。 可 以 将 其 改 为 鼠标 
指针 悬 停 时 触发 ,添加 的 jQuery 代码 (9-19. html) 如 下 : 


$ ("#myTab>1i>a") .mousemove (function(e) {$ (this) .tab('show');}); 


如 果 还 希望 单 击 选项 卡 导 航 链接 时 能 跳 转 到 某 个 页 面 , 则 首先 必须 去 掉 导航 链接 
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二 a 二 标记 的 data-toggle 二 "tab" 属 性 ,因为 该 属性 会 屏蔽 超 链接 功能 。 然 后 使 用 data- 
target 一 " 井 内 容 面板 id "来 联系 内 容 面 板 ,这 样 就 可 在 href 属性 中 设置 链接 的 页 面 了 , 代 
码 如 下 : 


<a href="index.html" data- target="#cont1"> 船 山 讲坛 </a> 


但 是 在 超 小 型 屏幕 上 ,由 于 只 能 采用 单 击 导航 链接 触发 ,因此 还 是 要 屏蔽 超 链接 功 
能 。 这 可 以 利用 jQuery 为 其 添加 data-toggle 二 "tab" 的 属性 ,兼容 各 种 屏幕 的 最 终 代码 
如 下 : 


$ (function () { // 页 面 加 载 时 触发 

if($ (window) .width()>=768){ // 如 果 是 中 大 型 屏幕 
$ ("#myTab>1i>a") .mousemove (function(e){ $ (this) .tab('show'); }); } 

else // 小 型 屏幕 则 添加 data- toggle="tab" 
$ ("#myTab>1i>a") .attr ("data- toggle", "tab"); }) 


9.2.5 媒体 对 象 


在 网 页 中 ,常常 看 到 如 图 9-22 所 示 的 效果 ,图 像 居 左 (或 居 右 ) 、 内 容 居 右 ( 或 居 左 ) 排 
列 ,Bootstrap 中 把 这 样 的 效果 称 为 媒体 对 象 , 它 是 一 种 抽象 的 样式 ,可 以 用 来 构建 各 种 不 
同类 型 的 网 页 组 件 。 使 用 媒体 对 象 的 一 个 好 处 是 : 无 论 媒体 对 象 容器 的 宽度 如 何 变化 ， 
图 像 的 宽度 始终 不 变 , 这 满足 了 响应 式 布局 时 屏幕 大 小 不 同 的 需要 。 


主义 ， 提 倡 不 能 离开 人 欲 空谈 天 理 ， 天 
| 在 人 王夫之 在 其 《周易 外 传 》、《 尚 书 引 
” 义 》 等 书 中 对 程 朱 理学 的 " 存 天 理 ， 灭 人 从" 提出 了 批评 。 





图 9-22 媒体 对 象 示 意图 
如 图 9-22 所 示 的 媒体 对 象 的 代码 (9-20. html) 如 下 : 


<div class="media"> 
<a href="#" class= "media- left"> 

< img class="media- object" src="images/wfzz.jpg" alt="" width="66"/></a> 
<div class="media-body"> 

<h4 class= "media- heading"> 王 船山 的 哲学 思想 < /h4> 

<p> 首 先 ,反对 禁欲 主义 …… </p> </div> 


</div> 


可 见 ,媒体 对 象 是 一 组 HTML 元 素 , 通 常 包括 以 下 几 个 部 分 : 
(1) media 元 素 一 一 媒体 对 象 的 容器 ,用 来 容纳 媒体 对 象 的 所 有 内 容 。 
(2) media-object 元 素 一 一 媒体 对 象 的 对 象 , 常 常 是 图 片 ,但 也 可 以 为 其 他 元 素 。 
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(3) media-body 元 素 一 一 媒体 对 象 的 主体 ,可 以 是 任何 元 素 ,常常 是 图 片 侧 边 内 容 。 

(4) media-heading 元 素 一 一 媒体 对 象 的 标题 ,用 来 描述 对 象 的 标题 ,此 部 分 是 可 
选 的 。 

提示 : 如 果 要 将 图 片 显示 在 右 侧 , 则 需要 将 a 元 素 放 在 media-body 元 素 的 后 面 , 而 不 
能 使 用 media-right。 因 为 media-left、media-right、media-middle、media-bottom 分 别 设置 
图 片 相对 于 侧 边 内 容 的 对 齐 方式 。media-middle 可 实现 图 片 相对 于 文本 重 直 居中 对 齐 。 

对 媒体 对 象 重新 定义 如 下 CSS 样式 ,可 得 到 如 图 9-23 所 示 的 头条 新 闻 效 果 。 

-media- heading {text - align: center; font- size: 16px; font- weight: bold; color: 


#8b0604;} 
.media-body{line-height:1.6em; font- size:12px; text- indent:2em;} 


”地 论 王 船山 "神道 设 教 "催生 遵 礼 实践 的 内 在 .- 
船山 继承 了 古代 社会 关于 "神道 设 教 "彰显 苯 礼 思想 的 基本 
| 










理 路: 认为 "神道 设 教 "可 催生 草 礼 ,得 礼 能 有 效 催生 章 礼 。 船 山 
遵 礼 实践 的 内 在 未 辑 机 理 包 合 四 个 屋面 … [4-28] 





图 9-23 头条 新 闻 效 果 


1. 媒体 对 象 的 嵌 套 


在 微 博 或 留言 评论 中 ,经 常 看 到 针对 某 个 留言 的 回复 ,其 界面 通常 如 图 9-24 所 示 。 
通过 媒体 对 象 的 典 套 ,可 轻松 地 实现 这 种 效果 。 





花木 兰 
王 船山 的 主要 思想 是 什么 ? 对 王 船山 的 评价 ? 


光头 强 
| 晚 明 学 不是 中 国学 术 第 三 次 高 峰 而 王 船山 是 这 次 高 峰 的 
- 代表 、 最 杰出 者 。 


能 大 
余 读 南明 史 未 老 不 慨 然 而 长 叹 者 也 谓 汉族 
气 数 何 若是 之 衰 , 帮 为 满 清 所 压制 | 不 得 通 其 志 耶 ? 





图 9-24 媒体 对 象 的 嵌 套 


如 果 在 一 个 media-body 元 素 中 ,又 嵌入 了 一 个 media 元 素 ,就 构成 媒体 对 象 的 租 套 ， 
图 9-24 对 应 的 代码 (9-21. html) 如 下 : 


<div class="media"> 
<a class="pull- left" href="#"> 
<img class="media- object" src="images/mv.jpg" width="64"></a> 
<div class="media-body"><h4 class= "media-heading"> 花 木兰 </h4> 
<p> 王 船山 的 主要 思想 是 什么 ? 对 王 船山 的 评价 ? < /p> 
<div class="media"> <!-- 此 处 是 嵌 套 的 媒体 对 象 --> 


<a class="pull- left" href="#"> 
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<img class="media-object" src="images/gtq.jpg"></a> 
<div class="media-body"> 
<h4 class="media-heading"> 光 头 强 </h4><p> 晚 明 学 术 …… </p> 
<div class="media"> <!-- 第 三 层 嵌 套 的 媒体 对 象 --> 


“</div></div></div></div></div> 


2. 媒体 对 象 列表 


如 果 有 多 个 同类 的 媒体 对 象 从 上 到 下 排列 , 则 可 将 它们 组 织 成 媒体 对 象 列 表 的 形式 ， 
媒体 对 象 列表 使 用 一 个 类 名 为 mediarlist 的 ul 元 素 定义 ,代码 框架 如 下 : 


<ul class= "media- list"> <!-- 定 义 媒体 对 象 列表 -- > 
<1i class="median>…</1i> <!-- 媒 体 对 象 1- -> 
<1i class="median>…</1i> <!-- 媒 体 对 象 2--> 
</ul> 


9.2.6 折 稚 面板 组 


折 秋 面板 组 (accordion) 是 网 页 中 常见 的 一 种 组 件 , 可 节省 网 页 上 的 纵向 空间 。 如 
图 9-25 所 示 。 从 结构 上 看 , 折 秋 面板 组 由 若干 个 折 秋 面板 组 成 ,每 个 折 和 面板 又 分 为 头 
部 区 域 和 内 容 区 域 , 单 击 头 部 区 域 可 切换 该 面板 内 容 区 域 的 显示 和 隐藏 。 


1. 折 又 面板 组 的 基本 组 成 


折 秋 面板 组 主要 由 以 下 几 个 HTML 元 素 定 义 : 

。 panel-group 一 一 定义 折 释 面板 组 , 即 所 有 折 释 面板 的 容器 。 

。 panel 和 panel-default 一 一 定义 一 个 折 释 面板 。 

panel-heading 一 一 定义 折 又 面板 的 头 部 。 

。 panel-collapse 一 一 定义 折 靶 面板 的 折 生 区 域 。 
panel-body 一 一 定义 折 生 面板 的 内 容 区 域 。 

下 面 是 一 个 折合 面板 的 代码 (9-22. html) ,其 显示 效果 如 图 9-25 所 示 。 


<div class="panel- group" id="accordion"> 
<div class="panel panel-default"> 

<div class="panel-heading"> 

<h4 class="panel-title"> 

<a data- toggle="collapse" data-parent= "#accordion" href= "#cl"> 研 究 机 构 </a> 
</h4> 

</div> <!--panel-heading- -> 

<div id="cl" class="panel- collapse collapse in"> 


<div class="panel-body"> 湖 南 省 船山 学 研究 基地 <br>*…< /div> 
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</div> <!--panel-collapse 结 束 --> 
</div> <!--panel 结束 --> 
< !-- 其 他 两 个 pannel 格式 和 上 边 的 一 样 --> 


</div> 


研究 机 构 
其 两 省 船山 学 研究 妊 地 
湖 两 省 船山 学 社 
竟 阳 师范 学 院 王 船山 四 刷 科 普 基地 
学 会 活动 
锥 山 研究 著作 
图 9-25 折 倒 面板 的 显示 效果 (9-22. html) 


以 上 代码 需要 注意 几 点 : 

(1) 折 和 面 板 的 内 容 区 域 panel-body 必须 放 在 折 肥 区 域 panel-collapse 中 。 

(2) 折 秋 面板 的 触发 区 域 是 panel-title 元 素 中 的 a 元素 ,每 个 a 元 素 都 要 指定 data- 
parent 属性 ,对 应 折 释 面板 组 的 id 属性 ,并 设置 href 属性 对 应 折 释 区 域 的 id 属性 ,再 设 
置 data-toggle 二 "collapse" 屏 珊 a 元 素 的 链接 功能 。 

(3) 如 果 给 折 释 区域 panel-collapse 应 用 in 类 , 则 该 折 释 区 域 默认 是 展开 的 。 


2. 折 释 面板 组 的 样式 定义 


为 了 美观 ,可 以 重 定义 Bootstrap 折 释 式 面 板 组 的 相关 样式 ,代码 如 下 (9-23. html) ， 
显示 效果 如 图 9-26 所 示 。 


.Panel- group{margin:10px;} 
.panel- default> .panel- heading {color: #fff;border- color: #711515; 


background- color: #c11136; /* 设 置 头 部 的 背景 颜色 * /} 
.panel- group .panel+ .panel { margin- top: 2px;} /* 修改 两 个 面板 之 间 的 间距 * / 
.panel-heading {padding:0} /* 将 头 部 区 域 的 填充 转移 到 a 元 素 上 */ 


.panel-title>a{display:block; /* 使 a 元 素 的 触发 范围 扩大 到 整个 头 部 区 域 * / 
height:100%;padding: 10px 15px;} 


湖南 省 船山 学 研究 基地 
湖南 省 船山 学 社 
衡阳 师范 学 院 王 船山 思想 科普 基地 








图 9-26 重 定义 样式 后 的 折 难 式 面板 组 
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9.2.7 提示 框 与 弹出 框 


1. 提示 框 
提示 框 (Tooltip) 是 一 种 比较 常见 的 功能 ,就 是 当 鼠 标 移动 到 特定 的 元 素 上 时 ,会 显 


示 相 关 的 提示 内 容 。 图 9-27 是 常见 的 提示 框 效 果 , 其 对 应 的 代码 (9-24. html) 如 下 所 示 。 


<script>$ ('[data- toggle=tooltip]') .tooltip(); </script> <!-- 初 始 化 提示 框 --> 

<a href="#" data- toggle="tooltip" title="07341234567"> 联 系 电话 </a> 

<a href="#" data-toggle="tooltip" data-placement="bottom" title=" 微 信 二 维 码 < 
br> 

<img src= 'images/ewm.jpg' style= 'height:150px'>" data-html="true"> 关 注 微 信 </a 

要 


07341234567 
到 电话 
图 9-27 常见 的 提示 框 效果 





以 上 代码 需要 注意 几 点 : 

(1) 提示 框 默认 没有 初始 化 ,因此 使 用 之 前 一 定 要 用 js 代码 初始 化 提示 框 。 

(2) 对 任意 HTML 元 素 添加 data-toggle 二 "tooltip" 将 使 该 元 素 转变 成 提示 框 。 

(3) data-placement 属性 可 设置 弹出 框 提示 的 方向 ,其 取 值 有 top bottom ,left right 


和 auto。 默 认 值 为 top。 


(4) 提示 框 中 的 内 容 可 在 title 属性 或 data-original-title 属性 中 设置 ,如 果 两 个 属性 


都 存在 , 则 以 data-original-title 属性 值 为 准 。 


(5) 提示 框 中 的 内 容 默 认 只 能 是 文本 ,如 果 希 望 内 容 是 HTML 代码 ,比如 让 提示 框 


显示 图 片 ,字体 加 粗 等 ,只 要 添加 属性 : data-html= "true" 就 可 以 了 。 


(6) 尽管 提示 框 可 以 作用 于 任何 HTML 元 素 ,但 一 般 对 行内 元 素 或 行内 块 元 素 设置 


提示 框 , 而 不 要 对 块 级 元 素 设置 提示 框 ,因为 块 级 元 素 默认 会 占 满 整 行 ,提示 框 会 在 该 行 
的 水 平 居 中 位 置 弹出 ,而 这 可 能 不 是 提示 文字 的 位 置 。 
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2. 更 改 提 示 框 的 默认 样式 
下 面 的 CSS 代码 可 更 改 提示 框 默 认 的 字体 大 小 、 背 景 颜色 等 。 
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.tooltip{ font- size:26px;} /* 更改 字 体 大 小 */ 
/* 更改 背 景 大 小 , 贺 角 弧度 ,提示 框 最 大 尺寸 */ 
.tooltip- inner {max— width: 200px; padding: 8px; background- color:#f00; border— 
radius:6px} 
.tooltip.top .tooltip-arrow{ border- top- color:#f£00} /* 更 改 箭头 颜色 * / 
.tooltip.bottom .上 tooltip- arrow{ border- bottom- color:#F00} 


3. 弹出 框 


弹出 框 的 效果 如 图 9-28 所 示 , 可 见 它 与 提示 框 很 相似 ,因为 弹出 框 插件 就 是 通过 继 
承 提示 框 来 实现 的 。 但 是 弹出 框 还 是 有 两 处 与 提示 框 不 同 : 第 一 ,弹出 框 具有 标题 栏 ; 第 
二 ,弹出 框 是 通过 单 击 触发 的 ,而 提示 框 是 鼠标 指针 悬 停 触 发 的 。 





图 9-28 弹出 框 效 果 (9-25. html) 
图 9-28 对 应 的 实现 代码 (9-25. html) 如 下 : 


<script>$ (' [data- toggle=popover] ') .popover () ;</script> 

<!-- 初 始 化 弹出 框 --> 
<a href="#"data- toggle= "popover" data-html="true" data- original-title=" 微 信 二 
维 码 " title=""data- content="<img src= 'images/ewm.jpg' style= 'height:150px'>" 


官方 微 信 < /a> 


以 上 代码 需要 注意 如 下 几 点 : 

(1) 弹出 框 默 认 没 有 初始 化 ,使 用 之 前 一 定 要 用 js 代码 初始 化 弹出 框 。 

(2) 对 任意 HTML 元 素 添加 data-toggle 二 "popover" 将 使 该 元 素 转 变 成 弹出 框 。 

(3) data-original-title 属性 用 来 设置 弹出 框 标题 ,data-content 属性 用 来 设置 内 容 。 

(4) data-html 二 "true" 使 弹出 框 内 容 支持 HTML 代码 。 

对 于 弹出 框 或 提示 框 ,虽然 可 以 在 其 中 添加 HTML 代码 ,但 由 于 这 些 代码 只 能 写 在 
元 素 的 属性 值 中 ,因此 不 建议 添加 很 长 的 代码 。 如 果 要 在 弹出 框 中 添加 很 多 代码 (如 很 多 
个 超 链接 ) ,建议 使 用 下 拉 菜 单 (dropdown) 。 


9.2.8 模 态 弹 窗 


模 态 弹 窗 (modal) 是 一 种 常见 的 网 页 效果 , 当 单 击 触发 元 素 后 ,将 在 屏幕 中 心 弹出 一 
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个 小 窗口 ,同时 整个 浏览 器 窗口 变 灰 。 因 此 模 态 弹 窗 组 件 包 括 弹 窗 触 发 元 素 和 弹 窗 框 。 
要 添加 一 个 基本 的 弹 窗 触 发 元 素 , 只 要 对 元 素 添加 data-toggle 二 "modal" 和 data- 
target 一 " 弹 窗 框 id"。 如 果 触 发 元 素 是 a 元素, 也 可 使 用 href 二 " 弹 窗 框 id" 来 取代 data- 
target 属性 。 
图 9-29 是 使 用 模 态 弹 窗 制 作 的 一 个 图 片 放大 效果 ,代码 (9-26. html) 如 下 : 


<a data- toggle="modal" data- target="#regbox" href="ac.html"> 


<img src="images/fm.png" width="200"></a> <!-- 弹 窗 触发 元 素 --> 
<div class="modal fade" id="regbox" tabindex="-1"> <!-- 灰 色 背 景 元 素 --> 
<div class="modal- dialog"> <!-- 弹 窗 框 元 素 --> 
<div class="modal- content"> <!-- 弹 窗 框 内 容 --> 
<div class= "modal-header"> <!-- 内 容 头 部 -一 > 
<button type="button" class="close" data- dismiss="modal"> 
<!-- 关 闭 按钮 --> 
<span aria-hidden= "true"> gtimes;</span>< span class="sr-only">Close</span></ 
button> 
<h4 class="modal-title"> 青 丘 狐 传 说 < /h4>< /div> 
<div class="modal-body"> <!-- 内 容 主体 --> 


<img src="images/qqhcs.jpg" width="450" /></div> 
<div class="modal- footer" style="height:60px;"> 
又 东 三 百 里 … < button type="button" class="btn btn- primary" data- dismiss= 
"modal" style="margin-top: 0px;"> 确 定 </button>< /div> 
</div></div></div> 


青 丘 狐 传 说 


又 东 三 百 里 ， 蝗 青 丘 之 山 ， 有 兽 和 ， 其 状 如 折 而 九 尾 。 





图 9-29 模 态 弹 窗 效果 


以 上 代码 需要 注意 以 下 几 点 : 
(1) 类 名 为 modal 的 元 素 表 示 模 态 弹 出 窗 的 灰色 背景 层 ,应 用 fade 类 可 使 其 具有 浙 
隐 动 画 效果 。 
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(2) 类 名 为 modal-dialog 的 元 素 表 示 弹 出 窗 , 虽 然 可 以 在 该 元 素 内 直接 添加 内 容 , 但 


是 效果 很 不 美观 。 


(3) 类 名 为 modal-content 的 元 素 表示 弹 窗 框 内 容 , 该 元 素 下 最 好 具有 modal- 


header .modal-body .modal-footer 3 个 子 元 素 ,使 弹 窗 框 显得 整齐 美观 。 
(4) 如 果 要 更 改 弹出 窗 的 大 小 和 位 置 , 可 参考 如 下 代码 : 


-modal- dialog{width:486px; margin:120px auto 0;} 


(5) 模 态 框 中 可 放置 任何 HTML 代码 ,如 表单 ,从 而 制作 出 弹出 登录 框 等 效果 。 


9.3 Bootstrap 网 页 重 构 实例 


如 图 9-30 所 示 的 网 页 是 采用 普通 CSS 布局 制作 的 ,并 没有 采用 Bootstrap 技术 。 本 
节 将 讨论 如 何 使 用 Bootstrap 技术 重 构 该 网 页 ,使 其 具有 响应 式 网 页 的 效果 。 限 于 篇 幅 ， 
只 对 页 面 主体 部 分 进行 重 构 。 重 构 后 在 中 屏 ( 见 图 9-31) 和 小 屏 ( 见 图 9-32) 下 均 有 满意 


的 显示 效果 。 下 面 是 用 Bootstrap 重 构 该 网 页 的 步骤 。 
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图 9-32 小 屏 和 超 小 屏 下 的 网 页 效果 


1. 测量 各 列 的 宽度 并 计算 比例 


首先 ,使 用 电脑 的 截屏 功能 将 网 页 界面 从 jkxy. hynu. cn 的 网 址 上 截图 下 来 。 再 使 用 
图 像 处 理 软件 对 该 截图 进行 测量 ,可 以 发 现在 网 页 主体 部 分 中 , 左 侧 栏 ( 轮 播 图 ) .中 间 栏 
(栏目 框 ) 和 右 侧 栏 (图 标 列 表 ) 的 宽度 分 别 为 553px、442px、129px( 注 意 这 些 宽 度 都 不 要 
包含 栏 间 距 ) ;然后 计算 出 3 栏 所 占 的 比例 分 别 为 49%、39%、12%, 测 量 栏 间 距 的 宽 为 
15px, 网 页 整体 的 宽度 为 1170px。 


2. 编写 布局 代码 


根据 3 栏 的 宽度 比例 ,定义 左 侧 栏 在 大 屏 下 占 50% 的 宽 (col-lg-6)。 但 是 中 间 栏 和 夺 
侧 栏 的 宽度 比例 与 Bootstrap 中 任何 列 的 宽度 比例 都 有 较 大 差异 ,为 此 ,可 自 定义 两 个 类 
col-lg-45 和 col-lg-15 ,设置 它们 的 宽度 分 别 为 38% 和 12%。 然 后 ,在 中 屏 下 ,定义 左 侧 栏 
和 中 间 列 各 占 50% 的 宽度 (col-md-6) , 右 侧 列 移动 到 下 一 行 , 占 100% 的 宽 (col-md-12)。 
因此 ,网 页 主体 部 分 的 结构 代码 (9-27. htmlD 和 各 栏 的 列 宽度 类 名 如 下 : 


<div class="container"> 


<div class="row"> 


<div class="col-1g- 6 col-md- 6">…</div> <!-- 左 侧 栏 --> 
<div class="col-1g- 45 col-md- 6">*…< /div> <!-- 中 间 列 --> 
<div class="col-1g-15 col-md-12">…</div> <!-- 右 侧 栏 --> 
</div> 
</div> 


上 述 代码 中 , 左 侧 栏 的 类 名 col-lg-6 可 以 省 略 ,因为 列 合并 的 类 名 是 向 大 兼容 的 ,col- 
md-6 就 包含 了 col-lg-6。 在 小 屏 和 超 小 屏 下 ,3 列 都 是 占 满 一 行 的 ,因此 不 需要 设置 
类 名 。 

自 定 义 两 个 类 的 col-lg-45 和 col-lg-15 的 CSS 代码 如 下 : 
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@media (min-width:1200px) { /* 此 处 必须 写 媒体 查询 * / 
-Col—-1g- 45{width:38%} .Col—-1g-15{width:12%} 
3. 设置 栏 间距 黎 入 行 


由 于 Bootstrap 的 默认 栏 间距 为 30px, 而 本 实例 中 网 页 的 栏 间 距 是 14px, 因 此 必须 
重新 定义 栏 间 距 , 代 码 如 下 : 





[class*=col-]{ padding- right: 7px; padding- left: 7px; } /* 重 置 栏 间 距 为 14pxx / 
.row {margin-right: -7px; margin- left: -7px;} /* 修 补 栏 两 侧 * / 
.Container { padding- right: 7px; padding- left: 7px; } /=# 修补 栏 两 侧 * / 


接 下 来 要 让 右 侧 栏 中 的 4 个 图 标 在 中 屏 以 下 占 满 一 行 水 平 排列 ,方法 是 在 右 侧 栏 中 
又 嵌入 一 行 ,然后 在 该 行 中 插入 4 列 , 每 列 放 一 个 图 标 , 每 列 在 超 小 屏 以 上 屏幕 中 占 25% 
宽 (col-xs-3) ,在 大 屏 下 占 100% 宽 (col-lg-12)。 结 构 代码 如 下 : 


<div class="col-1g-15 col-md-12"> <!-- 右 侧 栏 --> 
<div class= "Low btn link"> <!-- 舱 入 一 个 新 行 --> 
<div class="col-1g-12 col-xs-3"><a href="#"> 人 才 招 聘 </a>< /div> 
<div class="col-1g-12 col-xs-3"><a href="#"> 关 工 委 < /a>< /div> 
<div class="col-1g-12 col-xs-3"><a href="#"> 毕 业 论文 </a></div> 
<div class="col-1g-12 col-xs-3"><a href="#"> 领 导 信 箱 </a>< /div> 
</div></div> 


最 后 对 每 个 a 元素 设置 CSS 代码 ,使 它们 能 占 满 每 列 显示 。 代 码 如 下 : 


.btn link{ margin-top:15px; } 


.btn link afdisplay:block; width:100%; /* 占 满 一 列 使 其 能 自动 伸缩 * / 

line- height: 68px; margin - bottom: 12px; text - align: center; border: 2px solid 
#A6DOE7; 

/* 设置 渐 变 加 图 像 背景 , 圆 角 边框 * / 


background:url (img/fc.png)no- repeat 12px 10px, —webkit- linear- gradient (#fff,# 
d4ebfa); border- radius:8px; padding- left:40px; } 

.btn_ link a:hover{background:url (images/fd.png)no- repeat 8px 20px, 

—webkit— linear - gradient (#£fff, #A6D5FD); font- weight:bold; text- decoration: 

none } 


可 见 ,使 用 Bootstrap 制作 响应 式 网 页 ,可 以 不 用 编写 任何 媒体 查询 的 代码 ,只 需要 
在 布局 元 素 中 添加 代表 不 同 屏幕 尺寸 中 宽度 的 类 名 即 可 。 


习 题 











1. 如 果 要 在 超 小 屏 中 显示 某 一 列 ,在 其 他 屏幕 中 隐藏 该 列 ,应 使 用 的 类 名 是 
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2. Bootstrap 中 ,类 名 container 元 素 和 col-md-3 元 素 之 间 应 该 有 类 名 为 的 
元 素 。 

3. 对 于 二 div class 一 "col-md-3 col-xs-3" 过 ,其 中 可 以 省 略 的 类 名 是 

4. Bootstrap 列 与 列 之 间 的 间距 默认 是 PX。 

5. 如 果 要 让 布局 元 素 二 div class 二 "col-md-4 col-sm-6" 二 一 /div 二 在 小 屏 下 向 右 偏 
移 3 列 ,应 添加 类 名 。 

6. Bootstrap 的 container 容器 有 什么 作用 ? 

7. Bootstrap 轮 播 图 中 的 图 片 要 如 何 设置 才能 居中 显示 ? 
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附录 实 验 


实验 1 个 人 简历 网 页 


实验 目的 : 掌握 img、ul、hl、a 等 HTML 元 素 的 使 用 ;掌握 img 元 素 的 各 种 对 齐 方 
法 :了解 用 CSS 对 ul 进行 美化 的 方法 。 掌 握 在 DW 中 新 建站 点 、 新 建 网 页 、 输 入 代码 和 
测试 网 页 的 方法 。 

实验 任务 : 完成 如 图 A-1 所 示 的 个 人 简历 网 页 。 


。 联系 方式 ， 
天 0 。TEL:020-87818126 
A ° E- :wangz isi € 


图 A-1 个 人 简历 网 页 





实验 思考 : img 元 素 是 怎样 和 文字 左右 排列 的 ? 无 序列 表 可 以 说 套 吗 ?怎样 制作 到 
电子 邮件 的 链接 ? 


实验 2 圆 饼 型 盒子 的 制作 


实验 目的 : 掌握 盒子 模型 margin .padding border 的 灵活 运用 ,学 会 使 用 border- 
radius 制作 圆 和 圆 角 和 矩形 的 方法 。 学 会 使 用 hover 伪 类 实现 动态 效果 。 掌 握 使 用 负 值 
margin 实现 盒子 至 加 的 方法 。 

实验 任务 : 完成 如 图 A-2 所 示 的 圆 饼 型 盒子 网 页 。 





图 A-2 圆 饼 型 盒子 网 页 
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实验 思考 : 怎样 实现 单行 文本 的 水 平 居中 和 垂直 居中 ? 怎样 设置 元 素 的 背景 色 和 前 
景色 ? 


实验 3 ”制作 背景 翻转 的 图 标 
实验 目的 : 掌握 背景 定位 属性 的 应 用 ,能 利用 背景 定位 属性 制作 背景 图 像 的 翻转 效 


果 ; 掌 握 使 用 display 属性 将 行内 元 素 转换 为 块 级 元 素 的 方法 。 


实验 任务 : 使 用 如 图 A-3 所 示 的 Sprite 图 制作 如 图 A-4 所 示 的 图 标 列 表 网 页 (每 个 
图 标 大 小 为 120 X 68px)。 


例 人 才 
全 招聘 


er 








业 论 文 
= 了 选 题 
图 A-3 Sprite 背景 图 片 icon. png 图 A-4 图 标 列表 


实验 思考 : 本 例 能 否 使 用 background-size 属性 让 每 个 图 标 自动 拉 伸 显示 ? 
实验 4 栏目 框 的 制作 


实验 目的 : 掌握 浮动 属性 的 运用 ,掌握 清除 浮动 的 方法 。 掌 握 制作 栏目 框 的 3 种 方 
法 。 掌 握 修改 1 元素 列表 图 标的 方法 。 


实验 任务 : 完成 如 图 A-5 所 示 的 栏目 框 网 页 。 





基层 动态 


日 计算 机 科学 与 技术 系 举办 毕业 生 欢 送 会 计算 机 科学 与 … 07-25 
日 后 勤 管 理 处 成 功 举 办 后 勤 管理 处 成 功 举办 《 
日 会 计 系 成 功 举办 2017 届 学 生 毕 业 典礼 计算 机 科学 与 技 … 07-17 
日 土木 工程 学 院 学 生 喜 获 佳绩 

日 会 计 系 举办 201? 年 专 接 本 交流 会 








图 A-5 栏目 框 


实验 思考 : 当 新 闻 标 题 文 本 行 过 长 时 如 何 自动 省 略 并 添加 省 略 号 ? 
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实验 5 页 头 和 导航 条 的 制作 


实验 目的 : 掌握 网 页 居中 的 方法 ;掌握 网 页 页 头 的 结构 代码 和 样式 设计 ;人 掌握 水 平 导 


航 条 的 制作 ;掌握 导航 条 自 适应 屏幕 的 方法 。 
实验 任务 : 完成 如 图 A-6 所 示 的 页 头 和 导航 条 网 页 。 


翅 价 间 师 放 尝 院 计 苯 机 与 物 联 网 


HENGYANG NoRMAL univeRsirY 实验 教学 中 心 





首页 中 心 概况 实验 教学 实验 管理 设备 环境 





图 A-6 页 头 和 导航 条 


实验 思考 : 如 何 让 页 头 上 的 logo 向 右 移动 ? 导航 项 是 如 何 水 平 排列 的 ? 


实验 6 图 片 滚动 栏 的 制作 


实验 目的 : 掌握 网 页 中 图 片 滚动 栏 的 样式 设计 ,和 jQuery 实现 滚动 的 代码 。 领 会 液 


出 隐藏 属性 在 本 例 中 的 用 途 。 
实验 任务 : 完成 如 图 8-13 所 示 的 图 片 滚动 栏 效果 。 
实验 思考 : 本 例 中 overflow 属性 应 该 应 用 到 哪个 元 素 上 ? 


实验 7 网 页 的 布局 设计 


实验 目的 : 掌握 固定 宽度 网 页 布局 的 基本 方法 ,掌握 清除 浮动 在 网 页 布局 中 的 作用 。 


实验 任务 : 完成 如 图 5-56 所 示 的 网 页 布局 结构 图 (网 页 效果 图 见 图 5-55) 。 
实验 思考 : 固定 宽度 布局 和 可 变 宽 度 布局 的 代码 有 什么 区 别 ? 


实验 8 ”网 站 首页 的 实现 


实验 目的 : 掌握 网 站 首页 的 实现 。 


实验 任务 : 利用 实验 4、5、6、7 制作 的 网 页 组 件 和 网 页 布局 代码 完成 如 图 5-55 所 示 的 


网 站 首页 。 
实验 9 ”网 站 列表 页 的 实现 


实验 目的 : 掌握 将 网 站 首页 ( 见 图 5-55) 修 改 为 网 站 内 页 ( 见 图 A-7) 的 方法 。 
实验 任务 : 完成 如 图 A-7 所 示 的 网 站 列表 页 。 
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> 当前 位 轩 : 首页 »》 通知 公告 








日 豆 报 | 我 院 学 生 薄 世 异 大 学 生 建 筑 设计 大 赛 县 佳 捍 名 奖 

日 关于 2016-2017 字 年 第 二 学 期 全 校 《 形 势 与 现 沫 》 课 有 关 事 项 的 通知 
日 厦门 工学 统 2016-2017? 学 年 第 二 学 期 答疑 时 间 安排 表 

日 厦门 工学 耽 互联 网 + 大 学 生 创 新 创业 大 赛 通知 





日 关于 艇 好 201" 年 秋季 教 村 预订 工作 的 通知 





平台 客户 端 安装 及 登录 说 明 帮工 学 碗 互联 网 :大 学 生 创 新 创业 大 赛 通知 
A oN SAB TR a RP TM 


图 A-7 网 站 内 页 效果 图 (网 页 上 方 和 下 方 与 图 5-55 相同 , 故 省 略 ) 


实验 10 ”制作 下 拉 菜 单 


实验 目的 : 掌握 使 用 纯 CSS 和 Bootstrap 组 件 两 种 方法 制作 下 拉 菜 单 的 方法 。 
实验 任务 : 完成 如 图 5-32 所 示 的 下 拉 菜 单 的 制作 。 


实验 11 制作 Tab 面板 


实验 目的 : 掌握 使 用 Bootstrap 组 件 制作 Tab 面板 ,并 对 样式 进行 美化 的 方法 。 
实验 任务 : 完成 如 图 A-8 所 示 的 Tab 面板 的 制作 。 





， 【北航 经 管 学 术 论 坛 】 王 笑柄 博士 讲座 通知 


+“ 【北航 经 管 学 术 论 坛 】 闪 淳 昌 教授 “公共 . 
+ 【能 源 经 济 与 管理 学 术 论 坛 】Liu Xianbin. .. 
+ 【北航 经 管 学 术 论 坛 】 美 国威 斯 康 星 麦 贮 .. . 





图 A-8 Tab 面板 


实验 12 使 用 Bootstrap 制作 响应 式 网 页 


实验 目的 : 掌握 使 用 Bootstrap 栅 格 系统 进行 网 页 布局 的 方法 ;掌握 使 用 组 件 技术 制 
作 响应 式 网 页 的 方法 ,掌握 重 定义 栅 格 系统 参数 的 方法 ;掌握 重 定义 组 件 样式 的 方法 。 
实验 任务 : 完成 如 图 9-30 所 示 的 响应 式 网 页 。 
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